はじめてのReact Native

App Development # Expo # React Native

2019-03-17

クロスプラットフォーム開発を可能にするツールとして有名な React Native は (簡単なアプリであれば) ネイティブのコードを書くことなく，ネイティブアプリを作ることができます．(Vue Native...)

今回は簡単なサンプルアプリをビルドしたいと思います．(Windows で)

環境構築

React Native CLI を使っていきます．また，前提条件として，以下の環境で進めていきます．

Windows 10
Python 2 or 3
Node 8.3 or newer
Java Development Kit 8 or newer

macOS であればデフォルトで Python 2 が入っています．私の環境は Python 3 ですが，これでも動くらしいのでそのままいきます．

ちなみにバージョンの確認方法は以下の通りです．(大文字小文字に注意)

terminal

# Python のバージョン
$ python -V
Python 3.7.2

# Node のバージョン
$ node -v
v10.15.1

# JDK のバージョン
$ java -version
java version "1.8.0_172"
Java(TM) SE Runtime Environment (build 1.8.0_172-b11)
Java HotSpot(TM) Client VM (build 25.172-b11, mixed mode, sharing)

Java のバージョンが 1.8.0_172 なら JDK のバージョンは 8 (更新 172) です．

パッケージインストール

terminal

$ npm install -g expo-cli

react-native-cli などもありますが，expo cli のほうが速いらしいのでこれを使います．Expo を介したくない場合は react-native-cli でビルドしてください．

Android の環境構築

Windows では iOS のエミュレータは当然使えないので，Android エミュレータのみ準備します．

Android Studio インストール

Android Studio をインストールします．その際，Custom セットアップを選択し，以下の項目にチェックを入れます．

Android SDK
Android SDK Platform
Performance (Intel® HAXM)
Android Virtual Device

Android Studio の設定

[Configure] > [SDK Manager] で以下のパッケージを選択します．(Android 9 Pie でエミュレートする場合)

Android SDK Platform 28
Intel x86 Atom_64 System Image

また，[SDK Tools] タブに移動し，[Show Package Details] にチェックを入れた後，28.0.3 を選択します．ここまで済んだら [Apply] でインストールします．

環境変数の設定

Windows では [コントロールパネル] > [システムとセキュリティ] > [システム] > [システムの詳細設定] > [環境変数] で設定できます．

[システム環境変数] の [新規] で以下の設定で環境変数を作成します．

変数名：ANDROID_HOME
変数値：C:\Users\{ユーザー名}\AppData\Local\Android\sdk

パスの追加

[システム環境変数] の Path を選択し，[編集] を押します．その後，[新規] で以下のパスを追加します．

C:\Users\{ユーザー名}\AppData\Local\Android\sdk\platform-tools

登録後，下記のコマンドが実行できれば OK です．

terminal

$ adb

エミュレータを簡単に立ち上げたいので emulator コマンドを使えるようにしておきます．Path に [新規] で以下のパスを追加します．

C:\Users\{ユーザー名}\AppData\Local\Android\sdk\emulator

これで設定は終了です．

RN アプリの作成と起動

任意のディレクトリに移動し，インストールしたパッケージを用いてサンプルアプリを作成します．

terminal

$ expo init SampleApp

作成したら起動してみます．

Android Studio を起動し，適当なプロジェクトを作成します．その後，AVD Manager で [Create Virtual Device...] でデバイスを作成します．

先ほどパスを追加したのでコマンドが使えるようになっているはずです．まず，作成した仮想デバイスが認識されていることを確認し，リストのいずれかを起動します．

terminal

$ emulator -list-avds
Pixel_2_API_28

# インターネットに接続するオプションつき
$ emulator -avd Pixel_2_API_28 -dns-server 8.8.8.8

起動後，以下のコマンドでエミュレータ上で動かすことができるようになります．以下のコマンドを入力するとブラウザが立ち上がると同時にインストールを開始します．

terminal

$ npm run android

# もしくはコマンドライン上で選択
$ npm start

注意点として，iOS エミュレータはコマンドを実行すると自動的に起動しますが，Android エミュレータはコマンド実行前に起動しておく必要があります．また，実機上で動かしたい場合は USB ケーブルで接続し，実機の [開発者オプション] で USB デバッグをオンにすると，PC 側で認識してくれます．

(オプション付けたはずなんだけれども) インターネットへの接続がうまくできないと Could not load exp://192.168.2.104:19000. といったようなエラーが出ます (初期設定から GMT+9:00 に設定し直してもだめだった)．この場合はブラウザで接続モードをトンネルに切り替えてリロードするとうまくいくと思います．

また，Expo はローカルで動作しているものをインターネット経由で各デバイスに反映していますが，インターネット環境が利用できない場合はエミュレータであっても動作しません．--offline オプションをつけることでオフライン環境でも動作を確認できるようになります．(LAN モードではうまくいかなかった)

Expo の設定

最後に，やっておくと少しだけ開発が楽になる Expo の設定をしておきます．

起動した画面で Command + M (iOS は command + D) を押すとメニューが表示されます．初期設定ではライブリロードがオンになっていますが，これをホットリロードに変更し，アプリをリロードしたいときは R 二回連打で操作する形にすると便利です．

ライブリロード：アプリ自体をリロード
ホットリロード：差分のみの更新

初期画面から遷移していた場合，前者ではアプリ自体がリロードされるため初期画面に戻されてしまいますが，後者であれば差分のみ反映してくれるので変化を確認しやすくなります．

mktia's note