Setup React Native for Android

OS XでのReact Native for Androidのセットアップを紹介.

ようやくReact Native for Androidが公開されたので、 まずはOS Xでのセットアップを紹介.

  1. Install and configure SDK
  2. Install and run Android stock emulator
  3. Setup
  4. See Also

Install and configure SDK

SDKのインストールと設定をする.

まずはJDKの最新版をインストール.

android-sdkbrewでインストールします.

brew install android-sdk

次に

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

~/.zshrc又は~/.bashrcに追加し再読み込み.

source ~/.zshrc
# source ~/.bashrc

Android SDK Managerを起動.

android
  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository

にチェックを入れてInstall Packages.

Install and run Android stock emulator

Android emulatorをインストールして起動する.

android

Android SDK Managerを起動して

  • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
    • Android 5.1.1 (API 22)のタブ中にあるので注意.
  • Intel x86 Emulator Accelerator (HAXM installer)

にチェックを入れてInstall Packages.

Configure HAXM

HAXMの設定をする.

open /usr/local/Cellar/android-sdk/24.3.4/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_1.1.4.dmg

IntelHAXM_1.1.4.mpkgをダブルクリックし、画面の指示に従ってインストールする.

インストール終了後、新しいkernel extensionが正しく処理されていることを確認するため、

kextstat | grep intel

を実行しcom.intel.kext.intelhaxmが表示されることを確認する.

これでHAXMの設定は完了.

Run Android emulator

Android emulatorを起動する.

android avd

でAVD Managerを立ち上げCreate...でAVDを作成しStart...でEmulatorを立ち上げる.

Create AVD

又はすでに~/.android/avd/.avdファイルがあれば、

# ls ~/.android/avd/
# => Nexus_5_API_23_x86.avd Nexus_5_API_23_x86.ini
emulator -avd Nexus_5_API_23_x86

でファイル名を指定してEmulatorを起動できる.

Setup

最後にReact Native本体のセットアップをする.

NVMnodenv などでio.js 1.0 or newerを準備する.
(今回はnodenvとNode.js v4.0.0を使用.)

nodenv install v4.0.0
# nodenv global v4.0.0

npmでコマンドラインインターフェースのreact-native-cliをインストールする.

npm install -g react-native-cli
# nodenv rehash

するとreact-nativeコマンドが使用可能になるので、適当なディレクトリで

react-native init AwesomeProject

を実行すると、iOS用にAwesomeProject/iOS/AwesomeProject.xcodeproj
Android用にAwesomeProject/android/appとが生成される.

後は

cd AwesomeProject
react-native run-android

でEmulator又は(接続してsetupしていれば)実機でApplicationが立ち上がる.

Welcome to React Native

See Also