WSL2でReact Native(Expo)の実機確認まで難儀したので手順のメモ

環境

  • 実機はAndroid（Expo Goは事前にインストール済み）
  • Debian on WSL2
  • Windows 10
1
2
3
4
$ node -v
v16.4.2
$ npm -v
7.18.1
1
2
3
4
5
6
7
8
9
"dependencies": {
    "@expo/ngrok": "github:expo/ngrok",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
},

手順通りやるとアクセス出来ない

最初の環境構築はこんな感じで

1
2
3
4
5
6
7
8
9
// nodenvのインストール
$ anyenv install nodenv
$ echo 16.4.2 > .node-version
$ nodenv install
$ touch $(nodenv root)/default-packages    # ←nodenvインストール後に default-packages file not foundになったら実行
$ nodenv install

// React Native初期化
$ create-react-native-app myapp

このまま、マニュアル通りExpoを実行しても、QRコードは表示されるがアクセス出来ない

1
2
3
// NG
$ cd myapp
$ npm start

expo start –tunnelを使用する

expo start実行時に --tunnelオプションを使用します

事前に、 --tunnelを使用する際に必要な expo/ngrokパッケージをインストールしておきます

1
2
// expo/ngrokインストール
$ npm install expo/ngrok

次に、 package.jsonを書き換えます

1
$ vim package.json
1
2
"scripts": {
  "start": "expo start --tunnel",    # ← --tunnelを追加

あとは通常と同じく npm startを実行するのみです

1
$ npm start

うまくいっていると以下の通り、 exp://XX-XXX.anonymous.myapp.exp.direct:80みたいなURLでQRコードが生成されるので、実機のExpo GoからQRコードを読み取ってアクセス出来るか確認します

expo.jpg