ReactNative: 環境設定

ハイブリッドアプリを開発できる ReactNative。
高速にモバイルアプリが開発できるということで巷で人気です。

基本的にここの通りにすればセットアップができるのですが、一部ハマるところもあるのでついでにメモ。

まず node と watchman というツールを入れておく必要があります。

brew install node watchman

React Native の cli をインストールします。

npm install -g react-native-cli

プロジェクトを新規作成。

react-native init ProjectName
cd ProjectName

iOS

iOS での表示を見てみましょう。事前に Xcode をインストールして、Command line tools を入れておく必要があります。

react-native run-ios

Android

Android シミュレータを立ち上げる場合は以下。
こちらも事前に Android Studio で Android SDK を入れて、Android 6.0 の Android SDK を入れたのち、 Android Virtual Device (Android Emulator) を作成しておく必要があります。ただし AVD はかなり重いので Android デバイスをマシンに繋いで開発した方が効率的かもしれません…。

SDK Platforms

  • Google APIs level 23 Revision 1
  • Android SDK Platform 23 Revision 3
  • Intel x86 Atom_64 System Image level 23 Revision 9
  • Google APIs Intel x86 Atom_64 System Image Level 23 Revision 19

SDK Tools

  • Android SDK Build-Tools 23.0.01

この辺りを入れておきます。

また、$HOME/.bash_profile に Android SDK へのパスを通します。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
source ~/.bash_profile

Android デバイスを繋いでおくか、AVD を立ち上げてから以下を叩きます。

react-native run-android

デバッグ

それぞれ command+R (iOS) / command+M (Android) か、端末をシェイクするとデバッグメニューが表示されます。