React Nativeをお勉強し始めたけど、環境構築で七転八倒した話

今、本業がめちゃくちゃ暇なので、React触ったことないけど、React Nativeやってみたい！ということで環境構築しています。
環境構築が難しくてボコボコにされたので、インストール手順と、どのあたりに詰まったのか書きました。

環境とかやりたいこと

前提条件
☑ 開発マシンはWindows10
☑ React Native CLI（EXPOじゃない）
☑ とりあえず、Andoridのエミュレーターを動かす

ちなみに、javascriptとHTML、CSSはぼちぼち知ってるかな程度です。

たまには参考書買ってみようかな、なんて買ったものの、表紙にも説明文にもMacOSだって書いてないのにMacOS対象の本を買ってしまったり（泣）しました。この手の本はきっちりと対象のOSをでかでかと書いてください。技術書のデザインとして失敗してると思います。お願いします。

React Native　～JavaScriptによるiOS／Androidアプリ開発の実践

あんまりググりたくなかったので、最新の本を買ったはずが結局ググってます。ググる労力をけちるために本を買ったといっても過言ではないのに。

前半戦は初心者向けなので、わりと眠い内容です。
あえて3章から進めて必要な時に戻るといいかも。

いろいろ言ってますが、特に内容的に悪いってことはないかも。また読み進めたら評価変わるかもしれませんが。

インストール手順

能動的にインストールしたもの
☑ node.js
☑ yarn（要らんかったかも）
☑ Android Studio
☑ オープンJDKの最新版（私の時は14）
☑ python2（3じゃないよ）

手順は公式がいちばんやさしいかも。

Get Started with React Native · React Native

基本的には上記の流れに沿ってインストールします。

全部インストーラーで入れるならChocolatyは不要です。
chocolatyは公式とかいろんなブログが勧めてくるけど、これは好みです（多分）
私の場合は、パッケージ管理ソフト入れすぎるとかち合って事故りそう、と思って入れませんでした。

Androidの各SDKをインストールする

基本的には公式のまま入れてください。

新しいプロジェクトを作成してから入れてもいいし、プロジェクトを作成する前に入れてもいいです。

足りなかったら下の表からつまんで入れてみてください。
末尾の数字は選んだAndroidのAPIレベルに合わせてそろえてください。

いれたSDK
SDK Platforms
☑ Android SDK Platform 28
☑ Sources for Android 28（要らんかったかも）
☑ Intel x86 Atom_64 System Image
☑ Google APIs Intel x86 Atom_64 System Image
SDK Tools
☑ Android SDK Build-Tools 28.0.3
☑ Android  Emulator
☑ Android SDK Platform-Tools
☑ Intel x86 Emulator Accelerator (HAXM  installer)

Android Studioを使って、各SDKを入れていきますが、公式はかなりさらっとしているので、画面が不安ならこういう記事を見るのもいいかも。

React Native環境構築_自分用 - Qiita

ちなみに、私の時は買った本に従って、Pie(API Level 28)を基準にいれてました。
閉じちゃって何入れたかわからない場合、Android StudioのFileメニューのSettingから再び見れます。
Appearance＆Behavior＞System Settings＞Android SDK

一覧の右下のShow Package Detailに☑を入れると細かく好き勝手に入れられます。

パスを通す

コマンド系はさっさとパスを通してしまったほうが事故らなくて無難です。

環境変数へのPath
☑ javac
☑ adb（念のため）
☑ platform-toolsフォルダへのパス
☑ pythonのパス
ユーザー環境変数
☑ JAVA_HOME
☑ ANDROID_HOME

パスをいっぱい通します。
ここら辺はたぶんほかのサイト見てもおんなじです。

みんなわかると思うので詳しくは書きません。

あと時間がかかる上に、大量のデータをダウンロードするので、不安定だったり従量制の回線はお勧めしません。

Android仮想デバイスの設定

Android Studioで好きな端末を選んで仮想デバイスを作成します。
APIレベルさえ合っていれば、好きな端末でいいと思う。

画面はこの記事が見やすかったかも。

React Native環境構築_自分用 - Qiita

私は本に沿ってPixel2にしてみました。

React Nativeで新しいアプリケーションを作成する

これも公式にそってやります。

cmdで好きなフォルダに移動してからコマンドたたいてください。

時間がかかる上に、大量のデータをダウンロードするので、不安定だったり従量制の回線はお勧めしません。

私はタイプスクリプトがよかったので、こっちのコマンドにしました。

npx react-native init AwesomeTSProject --template react-native-template-typescript

起動してみる

☑ doctorオプションで環境が整ってるかチェックできる
☑ infoオプションでどんなバージョン、環境か一覧にできる

作ったフォルダに移動したら、とりあえず環境が大丈夫なのかチェックします。事例ならAwesomeTSProjectとかですかね。

npx react-native doctor

doctorオプションで下の結果が出てきます。

Common
✓ Node.js
✓ yarn

Android
✓ ANDROID_HOME
✖ Android SDK - Required for building and installing your app on Android
  - Versions found: N/A
  - Version supported: 28.0.3

Errors:   1
Warnings: 0

どれだけパスを通しても、Andoroid SDKのVersionsがN/Aになるのですが、実はこの状態でも起動できます！

最低限、Node、Yarn、ANDROID_HOMEに✓されてれば、OKです。

起動します。

npx react-native run-android

何も問題がなければ、公式のお手本通りの画面が出るはずですが…？

めっちゃ嵌ったポイント

☑ オープンJDK14以降を使う場合は、Gradleを6.3で指定しないとダメ

最初はAndoroid SDKのVersionsがN/Aになるのがだめだと思ったんですが…。

npx react-native run-android Failing in macOS 揃 Issue #28712 揃 facebook/react-native

なんかトラブルシューティングのそれっぽいスレも放置されたままだし、どうやら違うみたいです。

うーーーん、何がいけないの！と思って、出力されたログとにらめっこします。

i
nfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
debug Running command "cd android && gradlew.bat app:installDebug -PreactNativeDevServerPort=8081"

FAILURE: Build failed with an exception.

* What went wrong:
Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 882ms

めっちゃ優しいヒントが書いてある！

* What went wrong:
Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

これをググってみると以下の記事が！

開発メモ その198 Could not initialize class org.codehaus.groovy.reflection.ReflectionCache – A certain engineer "COMPLEX"

どうやら、オープンJDKのバージョンが14だと、Gradle6.3以前とは互換性がなくなってしまったらしい。

というわけで記事に沿って作ったアプリケーションの下にある「android\gradle\wrapper\gradle-wrapper.properties」を記事の通りに直したら通りました！

やったねー！

まとめ

React Nativeでrunに失敗したら見直す点

☑ パスの通し忘れがないか
☑ doctorオプションで足りてないものがないか
☑ verboseオプションでrun-androidしたときにWhat went wrongに何かかkれてないか

このポイントを押さえておけば、ググって何とか環境構築できるかも！

Windows10とAndorid StudioでReact Nativeの開発環境を構築するときのお話でした！