かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

react-nativeをWindowsで動かしてみた(ついでにVisual Studio Emulator for Android使って)

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp

はじめに

react-nativeっていうのを使うと、iOSとAndroidアプリまで作れるっていうじゃないですか。 ということで、AndroidアプリのHello worldくらいを試してみたいと思います。

iOSじゃないのは、純粋に私がMacを持っていないからです…。 Macさん…もうちょっとビルドの条件緩和してもらえませんかね。

インストール

Android SDKで、Android 6.0とAndroid SDK Build-tools version 23.0.1とAndroid Support Repositoryをインストールしておきます。

そして、PowerShellで以下のコマンドを打ち込んで完了。(Nodeは入れておいてね)

npm install react-native-cli -g

環境変数の設定

ANDROID_HOMEという環境変数がいるみたいなので、定義しておきます。 Android SDKの場所をパスに指定しておきました。

JAVA_HOMEもいるっぽいので、Javaのインストールフォルダを指定しておきます。

プロジェクトの作成

以下のコマンドを打ち込むことでひな型が作成されます。

react-native init HelloReactNative

エミュレータの立ち上げと実行

Visual Studio Emulator for Androidを立ち上げて、PowerShellでHelloReactNativeのフォルダに移動して以下のコマンドをたたきます。

adb reverse tcp:8081 tcp:8081
react-native start

続けて別のPowerShellを立ち上げてHelloReactiNativeのフォルダに移動して以下のコマンドを打ちます。

react-native run-android

そうすると、以下のような画面が立ち上がります。

f:id:okazuki:20160110094434p:plain

まとめ

何だかMacで開発しろよっていうプレッシャーを感じた。