読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

React

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