ReactNativeの環境構築をしてみた

カスタマイズ性が高いDeveloper Buildを諦めてExpo Goで環境構築をしています。
詳しくは「Expo Goで開発することにした経緯」をご覧ください。

React Nativeとは

ネイティブアプリのユーザインターフェイスを作る為のJavaScriptライブラリです。

Expoとは

React Nativeのフレームワークです。
ファイルベースのルーティング、高品質のユニバーサルライブラリ、ネイティブファイルを管理することなくネイティブコードを変更するプラグインを記述する機能などの機能を提供します。

環境構築

Nodeをダウンロードされていない方はこちらから
https://nodejs.org/en
特にこだわりがなければLTSをダウンロードして下さい。
node -vでバージョンが表示されたら成功です。

node -v
v18.18.0

プロジェクトの作成

以下を実行します。

npx create-expo-app@latest

以下のような表示がされます。

expo-template $ npx create-expo-app@latest
Need to install the following packages:
create-expo-app@2.3.5
Ok to proceed? (y) y
✔ What is your app named? … .
✔ Downloaded and extracted project files.
> npm install

~~~~
~~~~
~~~~
✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- npm run android
- npm run ios
- npm run web

以下のような構成になってます。

expo-template(main) $ tree -L 1
.
├── README.md
├── app
├── app.json
├── assets
├── babel.config.js
├── components
├── constants
├── expo-env.d.ts
├── hooks
├── node_modules
├── package-lock.json
├── package.json
├── scripts
└── tsconfig.json

8 directories, 7 files

Expo GoをiPhone,Androidでinstall

この時にexpoのアカウントを作るように言われますので作成して下さい。

npm run startを実行

npm run start

QRコードを読み取る

npm run start

> expo-template@1.0.0 start
> expo start

Starting project at /Users/yamanetaisei/Desktop/github.com/yamatai12/expo-template
Starting Metro Bundler
Unable to run simctl:
Error: xcrun simctl help exited with non-zero code: 72

QRコードがここに表示されますので読み取って下さい。

› Metro waiting on exp://192.168.3.4:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

Expo Go アプリで　「Expo Go」 をクリック

以下のように表示されたら完了です！！

今回環境構築したリポジトリはこちらです。
https://github.com/yamatai12/expo-template

Expo Goで開発することにした経緯

Where would you like to develop?はiOS device

How would you like to develop?はDevelopment buildを選択してます。

開発したアプリを自分のデバイスにインストールしてテストするのが今回の目的の為、EASではなく、Xcodeで開発を進めます。
アプリをリリースする場合は「Apple Developer Program」に加入し、年会費を支払う必要があるそうです。

Xcodeをインストールする

macOSのバージョンアップをしないといけないです。

https://support.apple.com/ja-jp/108382

Install expo-dev-client

npx expo install expo-dev-client

Plug in your device via USB

npx expo run:ios --device

📝  iOS Bundle Identifier Learn more

? What would you like your iOS bundle identifier to be? › com.anonymous.expo-template
~~~~
~~~~
CommandError: No iOS devices available in Simulator.app

iPhoneで開発者モードを有効にする手順

• iPhoneのホーム画面から「設定」アプリを開きます
• 「設定」メニューから「プライバシーとセキュリティ」を選択します
• 下にスクロールして「開発者モード」を見つけ、これをタップします
• 開発者モードを有効にすると、デバイスの再起動が必要になります。再起動後、確認のポップアップが表示されるので、これを承認してください

$ DEBUG=expo:start:platforms:ios* npx expo run:ios --device
  expo:start:platforms:ios:xcrun Running: xcrun devicectl list devices --json-output /private/var/folders/tp/qhw4c4ps0v3fpzz880ln57c00000gn/T/c0a62db98a07e79efb59b5a041d2055b --timeout 5 +0ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +15ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +1s
  expo:start:platforms:ios:getBestSimulator No booted simulator matching requirements (osType: iOS). +0ms
  expo:start:platforms:ios:getBestSimulator Default simulator ID: null +9ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +95ms
CommandError: No iOS devices available in Simulator.app

Simulatorではなく、実機で検証したいのにSimulatorがないというエラーになってしまいます。。
この為、Developer Buildを諦めてExpo Goに変更しました。

最後に

• Development Buildでできればしたいので引き続きトライします
• 個人開発の過程をQiitaで投稿していきますのでよろしくお願いします！！

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏