React Native, Expoを使ってみる

React Nativeを使ってアンドロイドのテストアプリを作ってみます。

ネイティブな部分は後回しにするとしてExpoを使って簡単に。

Expo（公式）

React Nativeでモバイルアプリをビルド、デプロイするサービスです。

expo-cliをインストールすることでプロジェクトの作成からビルドまで簡単に行うことが出来ます。

環境

Android SDKが必要になるためAndroid StudioをインストールしてSDK Manegerからインストールしておきます。

その時のパスを環境変数ANDROID_HOMEに追加します。

準備

最初にNode.jsを更新しておきます。

バージョンが古いと後々面倒なことになります（なりました）。

更新方法はいろいろありますが、windowsだと公式からインストーラーを使って更新すると問題が起きにくい気がします。

 

getting-startedを見ていきます。

ちなみに途中のタブを切り替えるとReact Nativeの説明も見れます。

 

expoをインストールしてプロジェクトを作成してみます。

コンソールにテンプレート選択と名前入力が出てくるので適当に選びます。

yarnを入れていると依存関係のインストールにyarnを使うか聞かれるのでY。

 

ドキュメントから少し外れますが、まずはブラウザで確認したいのでWebPack起動ができるようにパッケージを入れて起動します。

 

こんな感じのサービス画面とログが出ます。

WebPackの変換が終わったらさらにタブが開いてアプリの表示をブラウザで見えるのですが、Microsoft Edgeだとエラーが起きました。

screen.msOrientationがaddEventListenerをもってないせいかもしれません。

アドレスをchrome, firefoxに貼り付けると確認できました。

 

確認用だしEdgeを使う必要もないので既定のアプリからブラウザを変更しておく。

Navigationを使う

テストなのでそのままでもいいんですが、react-nativeとreact-navigationを合わせて使う時に上手くいかなかったのでついでに書いておきます。

まずプロジェクトで以下を追加します。

javascriptの書き方ですが、検索で出てくる内容の多くは古いもので現在のver 3は使い方が異なります。

公式ブログに沿ってやってみるのがいいと思います。

アンドロイドアプリビルド

expo build:android　でビルド開始です。

アカウントにログインする必要があります。

作成はWebからでもできます（expo.io/signup）。

 

ログインして続けるとエラーになります。

app.jsonに以下を追記します。

 

これで続きに行けます。

キーストアをExpoにやってもらうか自前で用意するか、今回はテストなので１で。

ビルド失敗。リンク先に詳細があるので見に行きます。

 

Google Play Serviceが原因っぽいです。

Android StudioからSDK Managerを開いてToolsをすべてアップデートするとこのエラーは消えました。

 

ビルドアプリのリンクができるのでダウンロードします。

これはExpoのWebページからダウンロードすることもできます。

 

apkファイルを実機に移してインストールしたところ無事動きました。

 

その他ビルドに関するドキュメントはこちらです。

 

追記：他エラー

19001ポートへの接続拒否されました。

調べてみると対策方法は２つ見つかりました。

1. expo startで起動する → CTRL+Cでキャンセル → expo build:android
2. expo startで起動する → 別ターミナルを開く → expo build:android

私の環境では２つ目で動くようになりました。