React Nativeのセットアップ

React NativeがAndroidに対応したので入門してみる。

事前準備

以下が準備できているものとする。

• Homebrewがインストール済
• nodebrewがインストール済
• xcode6.3 or higherがインストール済

また作業環境は　Mac OSX 10.11.1。

Androidのセットアップ

Android SDKのインストール

$ brew install android-sdk

export ANDROID_HOME=/usr/local/opt/android-sdk

を~/.zshrcまたは~/.bashrcに追加する。

$ source ~/.zshrc

Android SDK Managerを起動する。

$ android

• javaがないと怒られる。適宜インストール。
• ここからインストールした。
• http://www.oracle.com/technetwork/java/javase/downloads/index.html

$ java -version
java version "1.8.0_66"
Java(TM) SE Runtime Environment (build 1.8.0_66-b17)
Java HotSpot(TM) 64-Bit Server VM (build 25.66-b17, mixed mode)

以下のパッケージをインストールする。

• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository
• Intel x86 Atom System Image (for Android 5.1.1 - API 22)
• Intel x86 Emulator Accelerator (HAXM installer)

HAXMの設定。

$ open /usr/local/Cellar/android-sdk/24.4/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_1.1.5.dmg

IntelHAXM_1.1.5.dmgをダブルクリックしウィザードにしたがってインストールを完了する。 その後インストールの確認。

$ kextstat | grep intel

を実行。以下のメッセージが出力されることを確認。

com.intel.kext.intelhaxm

Android emulatorを起動。

$ android avd

createをクリックしエミュレータを作成する。

設定例。

startをクリックしエミュレータを起動する。

以下でも起動可能。reactNativeは適宜エミュレータ名に変更。

$ emulator -avd reactNative

React Nativeのセットアップ

Node.js 4.0 or newerとあるので、今回はnodebrewで4.2.1を使用する。

$ nodebrew install-binary v4.2.1

インストール後、使用バージョンを指定。

$ nodebrew use v4.2.1
$ node -v
v4.2.1

React Nativeのインストール

$ npm install -g react-native-cli

プロジェクトを作成する

$ react-native init AwesomeProject

Androidプロジェクトの起動

先にエミュレータを起動しておく必要がある。

$ cd AwesomeProject && react-native run-android

起動完了。

index.android.jsを編集する。Welcome to React Native!をWelcome to React Native!!!!に変更。 F2でメニューが開く、Reload JSでリロードすることができる。

変更が反映されることを確認。

iOSプロジェクトの起動

open ios/AwesomeProject.xcodeproj

xcodeで実行後、 Develop modeを有効にするか聞かれて許可すると、起動する。

iOSの場合は⌘-Rで　リロード。変更が反映される。

以上です。