前回（環境構築編）の続きです！
#今回の作業の流れ
・ReactNativeでの開発の基本
・実際に作ってみる
・テスト及びリリースのための準備
#ReactNativeでの開発
基本的にはJavascriptを使っていきます。ライブラリも豊富で、簡単に使いやすいUIパーツを導入できるのも魅力の一つです。詳しい説明は他の方々が既に素晴らしい記事をアップしているので割愛させていただきます。
個人的に私が参考にした記事を下に貼っておきます。
Reactの基本から実際のアプリ製作までシリーズで解説しています。
Expoのドキュメント。ビルドやリリース準備時にお世話になりました。
↓完成品↓
react-native-calendarsとreact-native-echarts-wrapperというライブラリを使用しています。簡素ですがそれっぽいアプリができました。
#テスト及びリリースのための準備
まず、実機にアプリとしてインストールしたり、テスト、リリースするためにはApple Developer Program($99/年)への登録は避けられません
ちなみに登録後、審査を受けてアクティベートされるまでは2日～1週間程度かかるようです。私の場合は登録から4日でアクティベートされました！
↑アクティベートされるとこのようなメールが来ます↑
さて、本題のリリース準備ですが、App Store Connectにアップロードするためにはipaファイルを作らなければなりません。ipaファイルはexpo build:iosで作ることができますが、そのためにはまず、ソースコードの他に設定ファイルと画像ファイル（アイコンやスプラッシュ画像など）が必要になります。
まずは画像ファイルから作ります。iOS向けの場合はassetsフォルダ内にicon.pngとsplash.pngを用意する必要があります。アイコンのサイズは1024*1024が推奨されているようです。スプラッシュ画像とは、アプリを開いた瞬間に出てくる画面で、使用する端末の向きによって切り取られ方が変わります。また、いずれもExpo Goでどのように表示されるか確認できるので、ズレが無いように調整しましょう！
画像ファイルを作成したら、次は設定ファイルを作りましょう。
app.jsonを開きます。expoの階層に多くのプロパティがあると思いますが、加筆すべきものはname、ios、version、icon、splashだけでひとまず大丈夫です。詳しくはこちらを参照してください。
私の場合はこのように設定しました。
{
"expo": {
"name": "My Trainer",
"slug": "trainig-app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.XXXXX.YYYYY.TrainingApp",
"buildNumber": "100",
"icon": "./assets/icon.png",
"supportsTablet": true
},
"android": {
"package": "com.XXXXX.YYYYY.TrainingApp",
"versionCode": 100,
"icon": "./assets/icon.png",
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
expo.iosのbundleIdentifierは他人と被らない唯一無二のものを設定する必要があります。また、アンダースコア（_）ではなく、ハイフン（-）を使うという点にも注意してください！
お疲れさまでした！これでipaファイルを出力するための準備ができました！
次回は実際にApp Store Connectへの登録と内部テストとしての実機へのインストール、リリースまでを行いたいと思います！
それでは～！