【React Native】 開発環境の構築とアプリ作成最初の一歩【初心者向け】

React Native とは

説明するまでもないですが、Facebook　が開発したJavaScriptを使用したネイティブアプリ開発のためのフレームワークです。
https://facebook.github.io/react-native/

どういったものなのかは、こちらが良くまとまっていると思います。
https://qiita.com/Iwark/items/7c27e919bb71f8b256f6

開発環境構築

Node.js 開発環境の構築、更新

こちらでNode.jsの管理については、こちらで詳しく説明しています。
https://qiita.com/keneo/items/08da941711a224b06700

具体的には「nodebrew」を使用して、Node.jsを複数インストールできるようにします。

Node.js 導入例

$ nodebrew install-binary v10.2.0
$ nodebrew use v10.2.0

※2018/05/24現在の最新版

react-native-cli の導入

開発時に使用するコマンド群をグローバルにインストールします。

$ npm install -g react-native-cli

これで "react-native" コマンドが利用できるようになります。

※ 尚、React Native のサイトでは watchman の導入をオススメされていますが、まだ入れなくても最初の確認はできます。必要に応じて導入してください。

アプリ作成

プロジェクト作成

プロジェクトを作成します。

$ react-native init [プロジェクト名]

以降、作成された[プロジェクト名]のフォルダ配下で作業します。

iOS

Xcode のインストール

通常通り、Mac App Store 等からインストールしてください。

アプリ起動

$ react-native run-ios

シミュレータが起動して、「Welcome to React Native!」画面をもつアプリが起動、表示されます。

Metro Bundler

上記の動作で別ターミナルが起動して以下のような表示でソースコードの変更を検知、アプリへ転送してくれます。（Androidの場合も同様です）

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

アプリの表示

変更の確認

ソース「App.js」の中身（テキスト部分など）を変更、保存し、シミュレータ上で Cmd + R で反映が確認できます。

エラーが出たら

プロジェクトの初期生成の手順には不安定な動きが発生する事があり、この段階でエラーでうまく起動しない事が多々あります。原因は不明ですが、私は気にせず下記の情報などからプロセスをkillするなどして対処しています。（まだまだ安定していないのかな...）

※参考リンク
React Native「No bundle URL present」エラー対策集

Android

Android Studio のインストール

通常通り、Android Studio からダウンロード、インストールしてください。インストール後、起動して必要なモジュールのインストールを実施、何かプロジェクトを作成して、通常画面が表示できるようになったら、シミュレータ利用のために「AVD Manager」を起動、必要なシミュレータのダウンロード、セットアップを実施する必要があります。

シェルのパス設定

インストールされた Android SDK 及び OpenJDK は通常のインストールではコマンドラインで使用することは出来ないのでパスの設定を行います。
.bash_profile の最後に以下を記述します。

export PATH=$PATH:$HOME/Library/Android/sdk/platform-tools
export PATH=$PATH:/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home/bin
export JAVA_HOME=/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home

プロジェクトのパス設定

ビルド時にSDKのパスを設定するためにプロジェクトの「android」フォルダ配下に「local.properties」を下記の内容で作成します。

sdk.dir = /Users/[username]/Library/Android/sdk

シミュレータ起動

iOS と違い、シミュレータを自動起動しないので、「AVD Manager」 から事前に起動しておきます。

アプリ起動

$ react-native run-android

シミュレータ上に「Welcome to React Native!」画面をもつアプリが起動、表示されます。

アプリの表示

変更の確認

ソース「App.js」の中身（テキスト部分など）を変更、保存し、シミュレータ上で「r」のダブルタップで反映が確認できます。

リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseStart