かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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で開発しろよっていうプレッシャーを感じた。