正しいReact Nativeの環境作り（Mac / 2018年度版）

追記（2019/1/18）：create-react-native-appがexpo-cliに統合されたという情報をいただき、修正しました。

・公式docs
https://facebook.github.io/react-native/docs/getting-started.html

React Nativeプロジェクトを作成するには、以下の二つの方法があります。
① expo CLIを使う
② React Native CLIを使う

① expo-cliを使う

Github：https://github.com/expo/expo-cli/
ドキュメント：https://docs.expo.io/versions/latest/workflow/expo-cli

Expo CLIとは

expo-cliを使用することで、expoというiOS/Androidアプリを通じて、ビルド不要のデバッグを行うことができるようになります。

最終的にネイティブビルドするときには、ejectという作業で標準プロジェクトへ変換します。

公式のdocsではこの方法が推奨されています。

インストール

npmとyarnがインストールされていることが前提です。どちらもbrewでインストールできます。

brew install yarn
brew install nodebrew

次に、create-react-native-appをインストールします。

yarn global add create-react-native-app
create-react-native-app MyApp

cd MyApp
yarn start

これでMyAppというアプリがexpoを通じて確認できるようになります。

iOSのシミュレータを起動する場合は、ターミナル上で「s」を、Androidのエミュレータで確認する場合は「a」をタイプします。シミュレータやエミュレータ上でexpoが起動し、expo経由でプロジェクトを確認できます。

expoの公式サイト
http://expo.io/

注）ちなみに2018年春ごろから、iOSでは自分のアカウント以外のプロジェクトが確認できなくなりました。

ネイティブのビルドを行う

expoでは実際のビルドや、ネイティブSDKの利用等ができません。（対応しているものを除く）
そこで、ejectを行い、標準のReact Nativeプロジェクトへの変換を行います。

ejectする

・EJECTINGの公式docs
https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md

実際にビルドしたり、XcodeやAndroid Studioで確認したい場合には、ejectという作業でexpoプロジェクトを標準のReact Nativeプロジェクトへ変換できます。

yarn 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. #これを選ぶ
  ExpoKit: I'll create or log in with an Expo account to use React Native and the Expo SDK.
  Cancel: I'll continue with my current project structure.

? What should your app appear as on a user's home screen? #ホームスクリーンに表示するアプリ名を入力

これで標準のReact Nativeプロジェクトに変換されます。これで、下記のReact Native CLIコマンドが使えるようになります。

② React Native CLIを使う

初めから標準のReact Nativeプロジェクトで開始したい場合は、React Native CLIをインストールし、以下のコマンドでinitできます。

yarn global add react-native-cli # CLIのインストール
react-native init MyApp

cd MyApp
react-native run-ios #iOSで起動します

React Native CLIコマンド

react-native init アプリ名 #新規アプリを作成
react-native run-ios #iOSで起動します
react-native run-android #Androidで起動します
react-native link #ネイティブコードとのリンクを行う（パッケージをインストールするときによく使う）