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

undefined

bokuweb.me

React Nativeのセットアップ

React Native Android

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 -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をクリックしエミュレータを作成する。

f:id:bokuweb:20151024164809p:plain

設定例。

f:id:bokuweb:20151024164902p:plain

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

f:id:bokuweb:20151024164925p:plain

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

$ emulator -avd reactNative

React Nativeのセットアップ

Node.js 4.0 or newerとあるので、今回はnodebrew4.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

起動完了。

f:id:bokuweb:20151024165013p:plain

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

f:id:bokuweb:20151024165157p:plain

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

f:id:bokuweb:20151024165312p:plain

iOSプロジェクトの起動

open ios/AwesomeProject.xcodeproj

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

f:id:bokuweb:20151024213345p:plain

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

以上です。