React Native開発環境整備メモ - 麦芽を支える技術

以前ちょっとアルバイト的な感じでReact Native触る機会があったものの、既存プロジェクトの改修という形で入ったこともあって初期の環境構築作業などちゃんとまとめておらず、いざ他の人にも教えよう！という時に困ってしまったので、だいぶ今更ながら基本的な作業をまとめるなど。

React Nativeとは

既に世の中にいろんな資料出回ってるので、そちらを参照のこと。

Mac App Storeよりインストール

ダウンロードはこちらから developer.android.com

初期設定は以下のような感じ

初回起動時のインストーラで「Custom」を選択し、以下をチェック
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
「Configure」-「SDK Manager」を起動し「Android 6.0 (Marshmallow)」の以下のSDKインストール
- SDK Platforms（Show Package Detailsにチェック入れる）
  - Google APIs
  - Android SDK Platform 23
  - Intel x86 Atom_64 System Image
  - Google APIs Intel x86 Atom_64 System Image
- SDK Tools（Show Package Detailsにチェック入れる）
  - 23.0.1

環境変数に以下を設定

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

Node.jsはnodebrew経由で導入した方が、複数Ver扱えて都合が良いですね。

$ brew install nodebrew
$ nodebrew install {version}  # かなり時間かかる
$ nodebrew use {version}

公式ドキュメントを見てもらうと分かりますが、導入自体は以下のステップで済みます。

$ brew install node   # nodebrewで導入済みなら不要
$ brew install watchman
$ npm install -g react-native-cli

とりあえず新規プロジェクトそのままのアプリを、試しにiOS/Androidそれぞれのシミュレータで起動してみます。

まずは以下のコマンドで新規プロジェクト作成。

$ react-native init AwesomeProject

そして以下のコマンドでReact Nativeを起動することで、ローカルにWebサーバが立ち上がります。（サーバ立ち上げ中のみ各デバイスでアプリが動作できるので、別コンソールで実行した方が良いです）

$ cd AwesomeProject
$ react-native start

とりあえずこれを一度やってみると、雰囲気がつかめる。

React Native、Xcode、Android Studioを同時に立ち上げて作業していると、やたらCPUパワー食う（PC温度が上がりファンの音が大きくなる）