ReactNativeでアプリを作成してみる

ReactNativeを触る機会が出来たので超初心者向けのサンプルアプリを起動するところまでで環境構築で躓いた部分をメモしておきたいと思います。

正方形336

動作環境

React Native他共通ライブラリ

React Native 0.54.4
Android SDK 23(Android 6.0)
Node.js 9.11.1
JDK8

Windows

Windows 10 Spring Creators Update (再起動してたら更新してたｗ)
Android Studio 3.1

macOS

macOS High Sierra 10.13.3
XCode 9.3
Android Studio 3.1

ReactNativeSampleアプリケーションを作成する

ここで訴えておきたいことは最新のReactNativeバージョンはまず不安定だから素直にreact-native initをデフォルトで打ってはいけないこと。

毎月のはじめにマイナーバージョンがインクリメントされますが大体ビルド出来ないと思ってて良さそうです。

必ず前月にリリースされたマイナーバージョンの最新パッチ、2018/4/6現在なら0.54.4を指定してアプリを作成することを強くおすすめします。

npm i -g yarn
npm i -g react-native-cli
react-native init --version 0.54.4 ReactNativeSample

起動するまでに躓いた部分

JAVA_HOMEのパスが間違っている

これはただの自分のOS側のメンテ不足だったので今有効なJavaのパスに変えました。

run-android時にSDKが見つからない

以下のメッセージが出てAndroid SDKが見つからないようでした：

> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

自分はANDROID_HOMEの環境変数を追加する方を選択しました。SDK locationはWindows/macOS共にAndroid Studioの設定内のAppearance & Behavior > System Settings > Android SDKよりAndroid SDK LocationをコピペしてWindowsはシステム環境変数に、macOSは.bash_profileに環境変数を追加しました。

Android SDK Platform 23が見つからない

Windowsの方はReact Nativeの為にAndroid StudioをクリーンインストールしたのでAndroid SDKはとりあえず8.1の最新側にしておいたのですがReact Native 0.54.4では23を要求してきました。
Android StudioからSDK Managerを起ち上げてAndroid 6.0(Marshmallow)にチェック入れてインストールすることでビルド開始しました。

JDKが必要

基本的すぎますがJREでは駄目でしたｗ JDKをインストールしてJAVA_HOMEを変更します。JDKダウンロードより最新のJDK10をインストールしました。が、これも失敗でまともにビルド出来なかったのでJDK8にしてビルド出来ました。

JDKバージョンに関しては、React Nativeでアプリ作成したときに作成されるgladleバージョン指定が2.2.3に影響しての事のようです。Android Studioでプロジェクトを開いて環境整備すれば新しいJDKでも動く様になることが予想されます。

INSTALL_FAILED_UPDATE_INCOMPATIBLEエラーが出て実機にAndroidアプリをインストール出来ない

同じアプリIDのアプリがインストールされている時に出る様です。自分の場合はWinで実機を使った後にMacでもビルドしてインストールしたためでました。

実機からReactNatvieSampleアプリを一旦アンインストールして解決です。

Hyper-Vを有効にしているとHAXMが使えずAndroidエミュレータが使えない

React Nativeともう全く関係ありませんが・・・AVDマネージャーから利用するAndroidエミュレータはHAXMというハードウェアアクセラレータを利用してサクサク動くエミュレータを実現しているようですがこれがHyper-Vと共存することが出来ない様です。

Androidエミュレータを利用する場合は一旦Hyper-Vを無効にしてPCを再起動する必要があります。

※Hyper-Vで動作するAndroidエミュレータがある様(Visual Studio Emulator for Android)なのでそちらに倒していく方が環境構築としては理想的かもしれません。

アプリを起動してから躓いた部分

表示されているショートカットが効かない

リロードはメニューの中にあるのでメニューが開けば問題無いのですが、表示が微妙に正しくなくて困りました。

エミュレータ利用時はリロードはWinはRキーを2回、MacはCommand+Rで効きました。メニューはCtrl(Command)+Mで、実機利用の場合は実機を振れば表示されました。

結構振らないとメニューが出ない

ジョークでは無くｗ

実機だとメニューを出すのにかなり強く振らないと出ませんでした。実機を飛ばして壊さないように気を付けてくださいｗ

まとめ

一応作成したReactNativeアプリをgithubに置いておきます。

UIの開発部分は超高速に実装出来そう

メニューにある「Hot Reloading」が衝撃的で、再ビルドしなくても仮想DOM部分等のJSファイルを更新しただけで画面が更新されます。編集して1秒もかからないうちに更新されるのは圧巻でした。

macOSならiOS/Androidアプリを両方起ち上げておきながら編集してすぐに表示を確認出来るのでこの開発スピードを体験してしまうとなんとかプロダクトに使えないかと思ってしまいそうです。

あとはReactNative自体の安定化か

まだ発展途上なのか、リロードをしたら中で例外を吐いたり挙動自身に不安定な部分が結構ありました。

Cordovaと比べてもパフォーマンスも悪いとは感じませんでしたし、もう少し枯れてくるとスマホのクロスプラットフォーム開発で漸くまともに使えるフレームワーク出てきたんじゃ無いかと云えそうな感触を受けました。

今後に期待です！