React Nativeを使う

クロスプラットフォーム開発ならFlutterもあるけどなぜReactNativeを選んだのかというと、単にもともとReactに馴染みがあったからです。それだけです。

Expoを使う

Expoとは、ReactNativeでのアプリ開発をめちゃくちゃ楽にしてくれるライブラリ群を備えたツールです。React Nativeの公式ドキュメントでも、Expoを使うかReact Native CLIだけを使うかの2通りで紹介されています。
これを使わない手は無いかと思います。便利なので使います。

さらにExpoには、「Managed workflow」と「Bare workflow」が存在します。
詳しい違いなどは他の記事を参照していただきたいのですが、アプリ開発を通してマイナーな機能やライブラリを実装する場合を考慮して、今回は汎用性の高いBare workflowを使います。
Bare workflowを使うとManaged workflowと違って、XcodeやAndroidStudioでの管理が必要になるのが面倒ですが、その分カスタマイズ性が上がります。
またBare workflowでは、Expo Goという簡単に実機テストができるシステムを使えない可能性があります。だからXcodeとAndroidStudioでそれぞれビルドして動作確認をします。

実行環境

react-native 0.73.2
expo 50.0.14
Node.js 12.3.0
Watchman 2024.03.18.00
Xcode 15.1
Android Studio Hedgehog | 2023.1.1 Patch 2

アプリの立ち上げ

Expo公式ドキュメントに手順が記載されています。

事前インストール

Requirementsの部分を見ると、

Node.js
Git
Watchman（Linux か macOS の利用者のみ）

が必要ということなので、それぞれインストールをします。（↑インストール先のリンク挿入済み）
これらをインストールすると、npxを通じてExpoCLIが利用できるようになります。

上記に付け加えて、

Xcode
AndroidStudio
yarn
VScode

も入れておきます。
yarnはNodeのパッケージ管理ツールですが、特にこだわりがなければnpmに代わってこちらを使用します。（部署の方針とか、好みとか便利さとかで判断）

アプリ新規作成

Expo公式ドキュメントの Get started の部分を進めていきます。
アプリの雛形を生成します。

$ npx create-expo-app --template

? Choose a template: › - Use arrow-keys. Return to submit.
    Blank
    Blank (TypeScript)
    Navigation (TypeScript)
❯   Blank (Bare)
        blank app with the native code exposed (expo prebuild)

--templateを指定すると上記のようにテンプレートの選択肢が表示されます。
今回はBare workflowで開発を進めるのでBlank (Bare)を選択します。

✔ Choose a template: › Blank (Bare)
✔ What is your app named? … test-app

アプリ名も聞かれるので適切なアプリ名を設定しておきます。（これが正式なアプリ名としてインストール後のスマホに表示されるというわけではありませんので〇〇-appとかでいいかと。）

これらを確定させるとインストールが始まります。

yarn導入

任意ですが、インストール完了後、npmをyarnに変更しておきます。
packege.jsonやpackege-lock.jsonがあるアプリのルートディレクトリで、

yarn

とだけ入力して実行します。

動作確認

シミュレータ

iOS

XcodeがPCにインストールされていることを確認してください。
アプリのルートディレクトリから、以下のコマンドを順に打ちます。

$ cd ios

$ pod install

$ cd ../

$ yarn run ios

pod installでは、現在インストールされているパッケージを参照して、iOS用のライブラリをインストールしているようなイメージです。
今後は、yarn installで何かしらのパッケージをインストールしたときだけ実行すれば大丈夫です。

yarn run iosを実行すると、ビルドが走ってそのままシミュレータが自動的に起動します。

Android

AndroidもiOSと同様に、

yarn run android

でビルドができますが、そのままだとエラーになる可能性があります。

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not determine the dependencies of null.
   > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/kawasakih/work/expo-practice/test-app/android/local.properties'.

AndroidSDKの場所を指定する必要があります。

まず、AndroidSDKの場所を確認します。

「Android SCK location」の部分に書かれているsdkのパスをコピーします。

そしてプロジェクトの /android/ ディレクトリに local.properties ファイルを作成して、先ほどのパスを指定します。

test-app/android/local.properties

sdk.dir=/Users/kawasakih/Library/Android/sdk

これで再度ビルドを実行します。

yarn run android

ビルドに成功したら、AndroidStudioを開きます。
すると右側の「Running Devices」でエミュレータが起動しているはずです。

Androidエミュレータでネットワークに接続する場合

多くのアプリではインターネットに接続する必要があるかと思います。iOSのシミュレータでは必要ありませんでしたが、Androidのエミュレータではmacのネットワーク設定をしないとインターネットに接続できません。

システム設定 > ネットワーク > 詳細 > DNS > 検索ドメイン
ここに、8.8.8.8を追加します

実機

iOS

１. アプリのルートディレクトリで

npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'

ビルドしてiOSの実行ファイルが/ios/に生成されます。
２. iPhoneを有線で接続
３. /ios/testapp.xcworkspaceをXcodeで開いて各種設定

User Script Sandboxingを「No」に設定
Signing & Capabilitiesでビルドを行うAppleDeveloperアカウントを選択
（初めてXcodeを使う場合は「add acount」をする必要がある）
「１.」で生成したビルドファイルをiOSプロジェクトに追加
/ios/フォルダ内のmain.jsbundleをxcworkspaceプロジェクトの直下に追加します。
ファイルを追加する際のポップアップで、「Copy items if needed」を選択し、「Create groups」を選択します。

４. Xcodeでビルド

2回目以降のデバッグ時は、１.のbundleビルドと４.のXcodeでのビルドだけで良いです。

Android

アプリのルートディレクトリで

npx react-native bundle --entry-file='index.js' --bundle-output='./android/app/src/main/assets/index.android.bundle' --dev=false --platform='android' --assets-dest='./android/app/src/main/res'

ビルドしてAndroidの実行ファイルが/android/に生成されます。
2. Android端末を有線で接続
3. /android/フォルダをAndroidStudioで開いてRUN