さわってみたいとずっと思いながら手を出せていませんでした。
少し暇ができたので休憩がてらこれまでやってこなかったことをやってみよう！
ということで『React Native」をさわってみたいと思います！
何をするのか？
ドキュメントの通り進めたいと思います！
npx create-expo-app@latestを実行
実行するとターミナルは下記のような表示をしてくれます。
Need to install the following packages:
create-expo-app@3.0.0
Ok to proceed? (y) y
yを打ち込むとWhat is your app named?と聞かれるので今回はfirstAppと打ち込んで進めると下記のようになります！
- cd firstApp
- npm run android
- npm run ios
- npm run web
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.9.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
npm notice To update run: npm install -g npm@10.9.0
npm notice
無事ディレクトリができたので移動しておきます。
cd firstApp
開発環境を整える
ほんとに何もわからないので一旦簡単そうなExpo Goで環境設定していきたいと思います！
セットアップにはアプリが必要なようです。
ダウンロードして開くと下記のような画面が表示されました。
開発環境の立ち上げ
作成したディレクトリでサイトに書かれている立ち上げコマンドnpx expo startを実行したいと思います。
実行するとQRコードが表示されるのでQRコードを読み取ります。
するとエラーになりました。
npm installを実行してpackageをインストールし、もう一度npx expo startを実行します。
The global expo-cli package has been deprecated. │
│ │
│ The new Expo CLI is now bundled in your project in the expo package. │
│ Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421. │
│ │
│ To use the local CLI instead (recommended in SDK 46 and higher), run: │
│ › npx expo <command>
This command requires Expo CLI.
Do you want to install it globally [Y/n]? Y
Installing the package 'expo-cli'...
Error: Cannot find module 'expo/config-plugins'
グローバルなexpo-cliは非推奨になったようなので対処します。
npm uninstall -g expo-cliが完了したらnpm install expo-cliでプロジェクトにインストールします。
npm installを実行してpackageをインストールし、もう一度npx expo startを実行します。
画面が表示されました！
ターミナルに表示されたQRコードをスマホで読み取るとスマホの方でも表示されるようになりました！
現時点だと環境を整えるのに少しクセがありましたが、これで開発準備が整いました！
参考記事
- https://qiita.com/Akihiro0711/items/bf9e96c36cc808052094
- https://gedem-blog.vercel.app/blog/expo-error-1/
- https://github.com/expo/expo/tree/main/packages/%40expo/cli
- https://zenn.dev/ohbashunsuke/scraps/79dbb5c3f597c2
- https://docs.expo.dev/
- https://stackoverflow.com/questions/70617115/cannot-find-module-metro-src-lib-terminalreporter-in-expo-react-native-project