2019/12/05Expoを利用したアプリのapp.jsonの例
expoとReact Nativeを利用したアプリを作る際の、「app.json」ファイルの記述例です。
私がアプリ作成の際によく使っている設定内容を、以下に解説をつけて記載しています。
ドキュメント
基本的には全部ドキュメント書かれているのでこれを参考にします。
最初はcreate-react-native-appなどを使って生成した雛形をそのまま使うのが簡単でおすすめです。
https://docs.expo.io/versions/v35.0.0/workflow/configuration/
app.jsonの例
私がアプリ構築で実際に設定しているものです。 expoを利用する場合のapp.jsonです。
{
"expo": {
"name": "my-app-name",
"slug": "my-app-slug",
"privacy": "unlisted",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.3.2",
"orientation": "portrait",
"primaryColor": "#FFE483",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#FFE483"
},
"updates": {
"fallbackToCacheTimeout": 10000
},
"ios": {
"bundleIdentifier": "my-app-id",
"buildNumber":"1.3.2",
"icon": "./assets/icon_ios.png",
"splash": {
"backgroundColor": "#FFE483",
"image": "./assets/splash.png"
},
"config": {
"googleMobileAdsAppId": "abc123"
}
},
"android": {
"package": "my-app-id",
"permissions": [
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION"
],
"versionCode": 23,
"playStoreUrl": "https://play.google.com/store/apps/details?id=abc123",
"config": {
"googleMobileAdsAppId": "abc123"
}
}
}
}解説
いくつか気をつけておくべき設定を紹介します。
expo
expoを利用する場合はこれを親に付ける必要が有ります。
"expo": {}slug
expoのサーバ内で取り扱われるIDのようなものです。 他のアプリとかぶらないようにする必要が有ります。
私は最初にドメインをつけて数字と名前をつなげることで、他の人とかぶらないようにしています。
「ドメイン-001-アプリの名前」みたいな感じです。
"slug": "my-app-slug",privacy
unlistedにしておくと、expo上で検索しても出てこなくなるようです。厳密に非公開になるわけではありません。URLを知っている人のみがアクセスできればいいのでそうしています。
"privacy": "unlisted",primaryColor
マルチタスク時のアプリ選択のヘッダー色になります。 アプリ内からも呼び出すことができるので、他のアプリと共通の実装ができるコンポーネントはこういった属性値を使うように心がけています。
"primaryColor": "#FFE483",updates
OTAアップデートの設定です。私はアップデートのリクエストのタイムアウトを10秒にしています。
enabledを追加してfalseを指定すると、OTAアップデートを無効化できます。
"updates": {
"fallbackToCacheTimeout": 10000
},googleMobileAdsAppId
google AdmobのIDを設定します。AndroidとiOSそれぞれで設定が必要です。 Admobの管理画面で取得して、app.jsonに記載しましょう。
"config": {
"googleMobileAdsAppId": "abc123"
}おわりに
特に難しいことはありません。
自分なりの雛形を用意しておいてアプリごとに必要な箇所を変更して設定すれば問題ないと思います。package.jsonや共通のモジュールと一緒に使いまわせるようにしておくと便利です。
