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の部分を見ると、
が必要ということなので、それぞれインストールをします。（↑インストール先のリンク挿入済み）
これらをインストールすると、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 ファイルを作成して、先ほどのパスを指定します。
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