Zenn
Closed6

Windows で React Native（Android）をセットアップする

erukitierukiti

Windows10 に WSL2 はインストール済み。WSL の ubuntu 20.04 で anyenv + nodenv + Node.js もインストール済み

Node.js での開発は可能な限り WSL2 に寄せたい

僕の2020/12/07時点での結論としてはWSL2だとエミュレータとの接続に困るので無理げーなので、WSL2 はあきらめる

最重要かどうか不明

npx react-native doctor でインストールが足りてないものが表示されるが、まったくあてにならない。

最重要かどうか不明

2020/12/07時点ではインストールするバージョンにきわめて重大な制限がある。

  • Android SDK Platform 29
  • Android 10 (Q)
  • Python2 が必須

npx react-native doctor でこの環境じゃないといろいろ怒られるけど、実質関係ないっぽい

erukitierukiti

Windows 側

  1. Android Studio をインストールする（可能なら CLI ツールだけにしたいが、いったんそこはあきらめる）
  2. Android Studio の Welcome to Android Studio 画面で、右下の Configure -> AVD manager を起動する
  3. +Create Virtual Device で Android Virtual Device を作成する
  4. 再生ボタンから起動する
  • Android Emulator が動く
erukitierukiti

WSL Ubuntu 側

  1. openjdk-*-jdk-headless をインストールする
  2. unzip をインストールする
  3. Download Android Studio and SDK tools  |  Android Developers から、Command line tools only をダウンロードしてくる
  4. 3 の zip を ~/Android 下にでも unzip する
  5. bashrc などを編集して、ANDROID_SDK_ROOT 環境変数と PATH を追加する
export ANDROID_SDK_ROOT="$HOME/Android"

export PATH="$ANDROID_SDK_ROOT/cmdline-tools/bin:$ANDROID_SDK_ROOT/platform-tools:$PATH"

この状態で sdkmanager を起動するとエラーが出る

Error: Could not determine SDK root.
Error: Either specify it explicitly with --sdk_root= or move this package into its expected location: <sdk>/cmdline-tools/latest/
s
  1. sdkmanager --sdk_root=$ANDROID_SDK_ROOT なら起動できる
  2. ~/Android/cmdline-tools/* を ~/Android/cmdline-tools/latest/ 下に移動すれば起動できる

unzip したら cmdline-tools/* として展開されるのに、cmdline-tools/latest にしなければいけないのがとても納得いかない。

とても解せぬが、まあそういうものだとあきらめる。

export ANDROID_SDK_ROOT="$HOME/Android"
export ANDROID_HOME="$HOME/Android"

export PATH="$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/platform-tools:$PATH"

sdkmanager で、Platform SDK などをインストールする。

sdkmanager platform-tools "platforms;android-30" "build-tools;30.0.2"

; があるので " で囲う必要あり。

実行すると、License agreement を求められるので、Accept に y を入れる。

とりあえず、WSL2 環境無理げーだった。

困ってること

  • WSL2 側で react-native android --deviceId emulator-5554 などを実行したときに、Windows 側で動かしている adb（port 5037）に接続できない。
  • 実験途中で、接続できたこともあったけど、なぜその時接続できたのか、そのあとなぜ接続できなくなったのかがわからない
erukitierukiti

Windows に Node.js を入れる。定番の Chocolatey だけど、管理者権限を求めすぎて大変扱いづらいので、scoop を使う。

  1. Scoop をインストールする
  2. scoop を使って nvm をインストールする（Nodist は npm のバージョンが古すぎるので使い物にならないので、インストールしちゃだめ）
  3. Nodist で LTS （現時点では14.15.1）を入れる

すでに Android Studio はインストール済みなので、Node.js が入れば、React Native のプロジェクト生成なりして動かすだけだと思う。

  • Windows Native の Node.js でファンがフル回転して react-native init が死ぬほど重い件
    • ノートPCなんだけど、4Kの外部ディスプレイを外したら速くなった。Windows Terminal + 広い画面だとGPU負荷で死ぬのかな？？？
    • 外部ディスプレイをつけたまま、Windows Terminal をノートPC側に持っていったら、やっぱり早い気がする（詳しい時間は計測してないけど、たぶん、外部ディスプレイを外したときよりは重いけど、外部ディスプレイに表示してる時よりは圧倒的に速い）
erukitierukiti

Windows Native Node.js でやればよいのでは？？と思って npx react-native init test すると、

error EBUSY: resource busy or locked, unlink 'C:\Users\xxxxx\AppData\Local\Temp\rncli-init-template-47oCjh\node_modules\rxjs\src\operators\merge.ts'

意味が分からん！！！なんで？なんで？？？

数回に一回成功するｗｗｗｗ

まぁアンチウィルスとかその手の兼ね合いの予感。

インストールが成功して、cd test; yarn android すると、gradle でエラーが出る。

https://stackoverflow.com/questions/61289461/java-lang-noclassdeffounderror-could-not-initialize-class-org-codehaus-groovy-v

test/android/gradle/wrapper/gradle-wrapper.properties の中身を書き換えて、test/android/gradlew clean build すると解決。

やっと、起動できた

このスクラップは2021/08/01にクローズされました