こんばんは。今日は、Expo+React Nativeアプリをビルドする方法について整理しておこうと思います。
Contents
ビルドの前準備
最初のReact Nativeアプリをまだ作成していない場合は、以下の記事をご参照ください。
【React Native開発】最初のプロジェクトを作成する | SIMPLE TRAVELER
Expoを利用している場合、ビルドの設定は、App.jsonで行われます。今回は特にいじりませんが、必要に応じて編集します。
ビルドの実行
それではビルドの実行です。以下の手順は、Expoの以下サイトでも説明されています。
https://docs.expo.io/distribution/building-standalone-apps/
Expo+React Nativeでは、以下のコマンドでビルド可能です。
## expoを最新にアップグレードしておきます
expo upgrade
## iOSの場合（今回はこちらを実行）
expo build:ios
## Androidの場合
expo build:androidビルドを実行すると、Expoのアカウント情報の入力が求められますので、入力します。なければ、その場で作成することが可能です。
また、”choose the build type you would like”では、”Archive”と”Simulator”から選択可能です。Archiveは、Apple Storeなどにアップロードする際のファイル形式です。ローカルでアプリのテストを行う場合などは、”Simulator”を選択すればOKです。
ビルドが無事完了しました。ビルドが完了したら、”Successfully built standalone app”部分に記載のあるURLにアクセスすると、アプリファイルがダウンロードできます。
ビルドしたアプリを XCode Simulatorでテストする
さて、次はビルドしたアプリをXCode Simulatorでテストしてみたいと思います。
ドラッグアンドドロップで行けるかなと思ったら・・
あれ？エラーが出た。結局色々と試した結果、以下で解消しました。
- X Code Simulatorを再起動する
- 以下のアプリファイル(XXXX.app)に対して、以下のコマンドを実行する
##
xattr -rd com.apple.quarantine <path to .app>
## アプリをシミュレータにインストールする
xcrun simctl install booted <path to .app>おお、今度はちゃんとアプリが入りました！
アプリも起動できました！
以上、Expo+React Nativeで開発したアプリ(今回はiOS)をビルドしてシミュレータで動作を確認するまでの手順を解説しました！
おしまい
[番外編] ReactNativeをもっと学ぶなら・・・
React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！
土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。
