【ReactNative開発】Expo×ReactNativeアプリをビルドする

こんばんは。今日は、Expo+React Nativeアプリをビルドする方法について整理しておこうと思います。

ビルドの前準備

最初の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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。