React Native の勉強 (2018年03月 現在)



目標: 他の人が書いた React Native アプリを ios / android で動作確認出来るようになるまで。

## 概要

React Native の [Getting Started](https://facebook.github.io/react-native/docs/getting-started.html) では、入門編として二通りのやり方を紹介している。

* QuickStart: create-react-native-app を使った方法
* Building Projects with Native Code: react-native-cli を使った方法

Reactjs (Web 版) の開発環境の構築は結構難しいので、create-react-app のような便利ツールには意味があると思うが、React Native は標準の react-native-cli  にプロジェクトを作成するツールがついて来るので、create-react-native-app の有り難みはあまり無いのではという印象だ。むしろ単体の Native アプリを作る時に create-react-native-app の場合 eject する必要があるので却って面倒かもしれない。

## 準備

### 落とし穴!! yarn のインストールが必要。npm5 では動かない。

    brew install yarn

### Expo Client のインストール

[Expo Client](https://expo.io/learn) というのを携帯にインストール。これは、React Native アプリを簡単に動作確認するためのツールらしい。

## [Quick Start](https://facebook.github.io/react-native/docs/getting-started.html) の通りにやる。

create-react-native-app のインストール

    npm install -g create-react-native-app

アプリ AwesomeProject の作成

    create-react-native-app AwesomeProject

実行

    cd AwesomeProject
    yarn start

ターミナルに QR コードが表示されるので携帯でスキャンすると Expo Client が立ち上がりアプリが起動する。

### Expo Client の動作

携帯を振るとメニューが出る。

* Toggle Element Inspector
    * 携帯画面上で要素を inspect 出来る。
* Debug Remote JS
    * Chrome が開きデバッグが可能になるが、URL が間違っているので注意。http://localhost を http://(マシンのIP アドレス) に変えないと CORS に引っかかる。
    * Stop Remote Debugging で元に戻る。

### iOS Simulator で動かす

    npm run ios

ドキュメントが少なくわかりづらいが、多分ここで Expo app を開いて試せという事なのだと思う。

### [iOS デバイスで動かす](https://facebook.github.io/react-native/docs/running-on-device.html)

普通の iOS アプリを作るには、`eject` という操作をしなくてはいけない。

```
$ npm run eject
...
? How would you like to eject from create-react-native-app? (Use arrow keys)
❯ React Native: I'd like a regular React Native project. 
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? AwesomeProject
? What should your Android Studio and Xcode projects be called? AwesomeProject
```

ios/AwesomeProject.xcodeproj を開くと Xcode が起動する。

* メインターゲット (AwesomeProject) を選択
* Bundle Identifier を適当なユニークな名前にする (例: org.metatoys.AwesomeProject)
* Signing > Team を選択
    * Apple ID が必要だが、デバイスでテストするだけなら Developer Program への入会は不要。
* AwesomeProjectTest も同様に Signing > Team を設定。
* iPhone を USB 接続する。
* Xcode のツールバーに iPhone が出て来る。
* ツールバーの再生ボタンを押す。
* Could not launch エラーが出たら
    * iPhone 設定 > 一般 > プロファイルとデバイス管理 > 自分のアカウントを有効にする。
    
#### iOS デバイス上でデバッグする

デバイスを振ると色々メニューが出る。

* Enable Live Load
    * ソースコードを書き換えて保存するとすぐにリロードする。
* Toggle Element Inspector
    * 携帯画面上で要素を inspect 出来る。
* Debug Remote JS
    * Chrome が開きデバッグが可能になるが、URL が間違っているので注意。http://localhost を http://(マシンのIP アドレス) に変えないと CORS に引っかかる。
    * Stop Remote Debugging で元に戻る。

## Building Projects with Native Code

https://facebook.github.io/react-native/docs/getting-started.html で Building Projects with Native Code を選択した時の方法。Mac で iOS アプリを作るケースを試した。

### 準備

必要ツールのインストール

    brew install node
    brew install watchman
    npm install -g react-native-cli

Xcode のインストール

* Mac App Store で Xcode をインストール
* Xcode > Preferences... > Locations > Command Line Tools: 最新を選択

### アプリの作成

    react-native init AwesomeProject

### iOS Simulator で動かす

    cd AwesomeProject
    react-native run-ios

### iOS デバイスで動かす

create-react-native-app を eject した後と同じく Xcode から起動する。

## 落とし穴

2018 年 3 月現在 Quick Start の通りにやると

    ERROR: npm 5 is not supported yet

というエラーが出る。調べると色々見つかった。

* [npm 5 not support bug!](https://github.com/react-community/create-react-native-app/issues/590)
* [react-native-cli is not compatible with npm@5](https://github.com/facebook/react-native/issues/14767)

解決策

* npm をダウングレード: `npm install -g npm@4`
* yarn をインストール: `brew install yarn`