Expo:React Nativeに入門する
https://1.bp.blogspot.com/-meiKw5q5Iew/UZmCUVnWnHI/AAAAAAAATgg/w7QXlET1QhY/s400/onsen_animal.png
https://reactnative.dev/docs/environment-setup
React Native 標準の入門手順にしたがって Web と Android 向けに開発してみる
公式で Expo を使用した開発手法が案内されているので今回はそれを活用する
プロジェクトの初期化
yarn create から expo-app を使用してアプリケーションの雛形を作成する
code:sh
yarn create expo-app AwesomeProject
TypeScript に対応してみる
エントリになっているファイルがデフォルトでは JavaScript になっているので App.js を App.tsx にリネームする
続いて yarn start で起動すると、TypeScript で実装するために必要なパッケージが提案されるので案内のとおりにインストールする
tsconfig.json などが生成されればOK。
Web版を起動する
Web版を出力する場合は、追加でパッケージを追加する必要がある。
必要となるのは react-native-web react-dom @expo/webpack-config の3つ
不足している場合は起動時に、追加インストールを促すメッセージが表示される
code:sh
npx expo install react-native-web@~0.18.9 react-dom@18.1.0 @expo/webpack-config@^0.17.2
追加パッケージのインストールが終わったら以下の起動コマンドを実行する
code:sh
yarn start --web
# もしくは
yarn start # 起動した後 w をタイプしてWeb版の起動を選択する
このとき、Node.js のバージョンが新しすぎると起動に失敗する
詳しくは Expo:Webが起動できないとき を参照
試しに起動した様子は以下
https://gyazo.com/a1f53304c738903a0c22d2138c1e39ab
Android版を起動する
事前に Android SDK などのセットアップを済ませておく
開発用のデバイスに adb を使って接続する
Windows Subsystem for Android も使用できる様子。
試したところ、19000 ポートが Node.js に専有されているため adb で Listen ができなかった。
なにか回避策はありそうな気がするがまたの機会に。
Web版が起動できている状態であり、デバイスにデバッグ接続が確立している状態であれば問題なく起動するはず。
試しに起動した画面は以下
https://gyazo.com/7e269dc23c23ea7acfe0b552ec9effeb
iOS版を起動する
実機がないのでできないんだなぁ...ということで割愛。
macOS の開発機こういうときは欲しくなるね！
HMRを試して見る
初期に出力されている文字の大きさを変えたり、末尾に絵文字を追加してみたりするとリアルタイムに変更が反映される。
コンポーネントのスタイリングなどは基本的な React の使い勝手と全く変わらないので基本的なUIのレイアウトなどには困らないはず。
https://gyazo.com/c859e391ddf81ddf75d8ceac39c0bee1