できること
実機を使ってライブデバッグをしながらアプリを開発出来る環境を簡単に作る事が出来ます。
『Create React Native App』というFacebookとExpoで共同開発したという、環境構築ツールを利用します。
また詳しくは書きませんが、『Expo SDK』を使うと、開発版の簡易リリースが出来ます(開発版DL用のURLが発行される)。気軽に、開発したものを他人に見せる事が出来るので便利です。
やったこと
- インストール
- Node.js & npm
- npmダウングレード
- watchmanの導入
- 実機でのライブデバッグ
- Hello World
※ 環境は、mac & ios 
インストール
Node.js & npm
公式ドキュメントではまずNodeを入れよと書いてあるので、
nodebrewを使って最新版のNode.jsをインストールします。
nodebrew導入
$ curl -L git.io/nodebrew | perl - setup
$ vi .bashrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
$ source .bashrc
$ echo $PATH
$ nodebrew help
nodebrew 0.9.7
Node.js
Node.jsの最新版を確認します。
こちらにバージョンについて書かれていますが、この時点では、
LTS(長期サポート版)がv8.9.1、最新版がv9.0.0となっていました。
特に業務で使うものでないので、せっかくなのでv9.0.0にします。
$ nodebrew ls-remote
v8.0.0 v8.1.0 v8.1.1 v8.1.2 v8.1.3 v8.1.4 v8.2.0 v8.2.1
v8.3.0 v8.4.0 v8.5.0 v8.6.0 v8.7.0 v8.8.0 v8.8.1 v8.9.0
v8.9.1
v9.0.0
ということで9.0.0をインストール
$ nodebrew install-binary v9.0.0
Fetching: https://nodejs.org/dist/v9.0.0/node-v9.0.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
currentがnoneなので、
$ nodebrew ls
v9.0.0
current: none
9を使うように設定してやります。
$ nodebrew use v9.0.0
use v9.0.0
$ nodebrew ls
v9.0.0
current: v9.0.0
// こちらもOK
$ node -v
v9.0.0
// Node.jsと一緒にnpmも入ります
$ npm -v
5.5.1
npm (Node Package Manager)も一緒に入りますので、このコマンドで諸々インストールしていきます。
npmのダウングレード
現時点でnpm 5系は、React Nativeでは使えないという問題があるらしく、
4系にダウングレードします 
- https://github.com/npm/npm/issues/16991
- https://github.com/react-community/create-react-native-app/issues/233#issuecomment-309250036
$ npm -v
5.5.1
$ npm install -g npm@4.6.1
/Users/me/.nodebrew/node/v9.0.0/bin/npm -> /Users/me/.nodebrew/node/v9.0.0/lib/node_modules/npm/bin/npm-cli.js
+ npm@4.6.1
added 32 packages, removed 193 packages and updated 267 packages in 9.173s
$ npm -v
4.6.1
watchmanのインストール
さて、このまま作業を進めると、下記のエラーに遭遇することになると思うので、ここで watchmanを入れておきます。
Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288
- https://github.com/react-community/create-react-native-app/issues/382
- http://itexplorer.hateblo.jp/entry/20170901-react-native-install-watchman
インストール方法 にも書いてある通りに以下でインストールします。
$ brew update
$ brew install watchman
ReactNativeのインストール
Create React Native App インストール
$ npm install -g create-react-native-app
プロジェクトの作成とビルトインサーバーの起動
$ cd 自分の/好きな/ディレクトリ
$ create-react-native-app MyProject
npm start
Starts the development server so you can open your app in the Expo
app on your phone.
npm run ios
(Mac only, requires Xcode)
Starts the development server and loads your app in an iOS simulator.
npm run android
(Requires Android build tools)
Starts the development server and loads your app on a connected Android
device or emulator.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd MyProject
npm start
Happy hacking!
npmコマンドの説明と、次にするべきことが出力されてくるので、そのとおりに npm start してみます。
$ cd MyProject
$ npm start
実機での確認
iPhoneでの例になりますが、App Storeから 『Expo App』をインストールします。開発中はこのアプリ上で動作確認をしながら進めます。
また、iPhoneとPCを同じWifiに接続しておきます。
出力されたQRコードをアプリで読み取ると、アプリ起動リンクが表示されるので、押下して起動。
App.js にべた書きされた文章が出てくれば完了です。
続いてチュートリアルに沿ってべた書き文章を Hello world に書き換えて保存をすると、アプリ側がローディングして変更が反映されます。