やりたいこと
- UbuntuにJavaScriptの実行環境（Node.js）をインストール
- UbuntuにReact Nativeプロジェクトを作成する
- スマートフォンにExpo Goをインストールする
- QRコードを読み込んでスマートフォンにReact Nativeアプリを表示させる
動作環境
| OS | Ubuntu |
| バージョン | 22.04.3 |
| 動作環境 | WSL2 |
前提条件
- Linux 用 Windows サブシステム (WSL)でUbuntuをインストールしていること
- JavaScriptの実行環境（Node.js）をインストールしていること
ディレクトリ構成
プロジェクト作成コマンドに「template brank」を追加することで最低限の依存関係でプロジェクトが作成される。
sampleapp
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
└── package.json必要なパッケージの説明
react-dom
Reactを動作させるために必要
react-native-web
React NativeをWeb上で実行するために必要
@expo/metro-runtime
サーバ起動時に必要。Expo SDK 50 以降の Web プロジェクトに推奨されるバンドラー。
環境構築（WSL2+React Native+expo）
React Nativeプロジェクトを作成していきます
「template blank」をつけることで最低限の依存関係でプロジェクトが作成されます。
※sampleappは任意のプロジェクト名
npx create-expo-app sampleapp --template blank作成されたプロジェクトに移動
cd sampleappReactを使用するためのパッケージとReact Nativeを起動するためのパッケージをインストールする
npx expo install react-dom react-native-web @expo/metro-runtimeサーバを起動する
npx expo start
ブラウザを開いて「http://localhost:8081」にアクセス
Web上で表示できました！
次はスマートフォンでアクセスしてみましょう。「Expo Go」というアプリが必要です。
expo goで実機検証
スマートフォンに「Expo Go」をインストールする
「Expo Go」をスマートフォンで起動した後にQRコードを読み込む
しばらく接続を待ってみると・・・
スマートフォンでアクセス失敗。。。。
WSL2で実行する場合の注意点
WSL2で開発する場合、外部からアクセスする設定を行わないと「Expo Go」に接続できない。
上記のセットアップを完了すると、
npx expo startWSL ターミナルで動作するはずです。この時点では、ブラウザーで Web バージョンを実行することもできます。ただし、開発ビルドにはまだ接続できません。開発サーバーの URL/QR コードは
172.xIP アドレスで始まっていますが、通常は LAN 上の IP アドレス (通常は 192.168.x) が想定されます。この IP アドレスはマシンの内部にあり、WSL 環境内の Linux VM が含まれるプライベート ネットワーク上のアドレスです。デフォルトでは、この IP アドレスはマシンの外部からはアクセスできません。そのため、開発ビルドを実行しているモバイル デバイスは、たとえデバイスが LAN 上にあっても、開発サーバーに接続できません。ゼロ構成の回避策の 1 つは、 を実行することです
https://github.com/expo/fyi/blob/main/wsl.mdnpx expo start --tunnel。これにより、ngrok がインストールされ、開発サーバーがパブリックにアクセス可能な Web アドレスに転送されます。ただし、更新に時間がかかるため、LAN から開発サーバーに接続できれば理想的です。
「tunnel」をサーバ起動時のオプションに追加する。
npx expo start --tunnel
アドレスが以下のように変わりました。
「exp://172.28.121.83:8081 」→ 「exp://zrxgtcy-anonymous-8081.exp.direct」
再度QRコードを読み込んでみましょう。
ビルドが完了したようです。※iPhoneを使っているため、iOSとなっています。
再度スマートフォンを見てみると・・・
スマートフォンで表示できました！
ホットリロードが効いているので実機検証しながら開発も可能です。
App.jsファイルを「Hello!!」に変更します。
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello!!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});ファイルを保存するとホットリロードが効いているため、すぐに表示が切り替わります。
Hello!!に変更されました！
