React Native + Expo アプリをDeploy(ネイティブビルド)する - 2020年最新版

2020年10月12日

　今回は、Expoで作ったアプリを、Androidのネイティブアプリとしてビルド（Deploy）します。
　この記事では、前々回までで作成途中のHello Worldアプリ（請求書アプリモックアップ）をDeployします。公式ドキュメントはこちら。

この記事は連載です。親記事はこちら

【連載】初めてのReact Native + Expo開発環境構築入門(Macベース)

前回の記事

: 参考React Native + Expo アプリをPublish(公開)する：テスト配布する - 2020年最新版

　Expoで作ったアプリは、とても簡単にPublishしたりDeployできます。　この記事では、前回までで作成途中のHello Worldアプリ（請求書アプリモックアップ）をPublishします。

続きを見る

前提

　expo-cliがグローバルインストールされていることを前提とします。インストールしたかわからない場合は、この連載の初回を御覧ください。

　また、Windowsの場合はWSLが有効になっている必要があります。この記事はMacを想定していますので詳細は省略しますが、必要な方はWindowsを対象としている元記事を見てください（元記事は少し古いです）。

app.jsonにビルド情報を設定

　AndroidおよびiOS用にビルド情報を設定します。Visual Studio Codeでプロジェクトを開いて、以下の情報を入れます。通常であればAndroidとiOSの部分だけ、以下にあうように追記すればよいはずです。
　"com.yourcompany.yourappname"部分は、会社のWeb URLの逆（example.comならcom.example）を入れて、さらにアプリのslugを入れるとよいでしょう。ただし、Androidのpackage名にはハイフンが使えないので、ハイフンはアンダースコアに置き換えましょう。（- → _）

{
  "expo": {
    "name": "Hello World!",
    "slug": "hello-world",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "description": ""
  }
}