ReactNative for AndroidでHello World(セットアップ方法とか)

このエントリーをはてなブックマークに追加

ReactNative for Android

ついにReactNative for Androidがリリースされました。
とりあえず簡単にセットアップ方法をご紹介します。

ReactNativeの公式インストラクションはこちら

実行環境

Mac OS X

今のところOS Xのみサポートされているようです。

Homebrew

nvm, watchman, flowをインストールするのに利用します。

Node.js 4.0以上

nvm経由でインストールしましょう。あるいはnodebrew使ってもいいし、直接入れてもよいです。
Terminalで使えるように環境変数の設定とかも必要です。

watchman

Node.jsのファイル監視関係のバグを回避するためにもwatchmanを利用するのがいいみたいです。

brew install watchman

flow

flowを使いたい場合はこれもhomebrewからインストールします。

brew install flow

Android SDK

Android向けの開発なのでAndroid SDKが必要です。
未インストールの方はこちらの手順にしたがって設定してください。

※私の環境では実機(Nexus6 5.1.1)で動かすことができなかったので、エミュレータのインストールもしておくといいと思います。
※2015/09/17追記: 実機でのデバッグ方法わかりました

ReactNativeのインストール

下記コマンドを実行します

npm install -g react-native-cli  
react-native init AwesomeProject  
cd AwesomeProject  

AwesomeProject はプロジェクト名なので、なんでもいいです。

サンプルアプリをAndroid実機で実行する

下記のコマンドを実行すると、エミュレータでアプリが起動します。

react-native run-android

コードに変更を加え、リロードする

適当にコードを書き換えてみましょう。 コードに変更を加えたら、エミュレータ上で F2 を押すとメニューが表示されます。
"Reload JS" をクリックすると画面がリロードされ、コードの変更がエミュレータにも反映されます。

(クリックするとyoutubeにとびます)

ReactJSでついにAndroidアプリがつくれるようになった…と思うとテンション上がりますね。
豊富なnode.jsの資産を使えるので、色々夢が広がります。 TitaniumMobileのようにならないか心配ですが、Webでもある程度市民権を得ている技術ではあるので、それなりに流行るんじゃないかなー、と思ってます。

こちらからは以上です。
追って簡単なアプリとかも作ってみようと思います。

参考リンク