首页codefrontend

React Native（Expo）开发完成后，如何把代码变成可以在真机上安装的 .apk 文件？本文记录使用 EAS Build（Expo Application Services） 进行云端打包的步骤。

# 1. 准备工作

首先安装 Expo 提供的构建工具 eas-cli 并登录账号。若没有账号，可先注册：https://expo.dev/

# 全局安装 EAS CLI
npm install -g eas-cli

# 登录 Expo 账号
eas login

# 2. 项目标识配置（app.json）

在打包前，必须确认 App 的名称和唯一包名（Package Name）。打开项目根目录下的 app.json 进行修改：

{
  "expo": {
    "name": "中医智能面诊",        // App 在手机桌面上显示的名称
    "slug": "tcm-face-diagnosis", // Expo 项目标识（英文）
    "version": "1.0.0",
    "android": {
      "package": "com.koen.tcmface", // 【关键】安卓包名，必须唯一
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "ios": {
      "bundleIdentifier": "com.koen.tcmface" // iOS 包名
    }
  }
}

# 3. 构建配置（eas.json）

默认情况下，EAS Build 会生成 .aab 文件（用于上架 Google Play）。如果想直接生成可安装的 .apk，需要调整 eas.json。

运行初始化命令：

eas build:configure

然后编辑生成的 eas.json，重点是在 preview 配置里设置 buildType: "apk"：

{
  "cli": {
    "version": ">= 7.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "android": {
        "buildType": "app-bundle"
      }
    }
  }
}

# 4. 执行打包

一切准备就绪后，运行以下命令开始云端构建：

eas build -p android --profile preview

参数说明：

  • -p android：指定打包 Android 平台
  • --profile preview：使用 preview 配置（生成 APK）

构建完成后，终端会给出下载链接（有时也会显示二维码），按提示下载安装即可。

# 5. 可能出现的问题

# 5.1 打包后连不上后端服务（Network Error）

现象描述

在开发阶段（使用 Expo Go）时，APP 可以正常连接本地后端（如 http://192.168.x.x:8000）。但是一旦打包成 APK（Release 版本）安装到手机上，所有涉及后端接口的请求全部失败，或者直接抛出 Network Error。

根本原因

Android 9（API 28）及以上版本默认的安全策略会限制明文 HTTP（Cleartext Traffic）。

  • 开发版（Expo Go）：为了方便调试，可能对部分场景更宽松。
  • 正式构建（Build）：出于安全考虑，通常更严格；如果后端是自建且只提供 HTTP（IP 直连），请求可能被系统拦截。

解决方案

在 Expo（Managed Workflow）中，不能直接修改 AndroidManifest.xml。可以用 expo-build-properties 插件注入网络配置。

操作步骤

  1. 安装配置插件（项目根目录执行）：
npm install expo-build-properties
  1. 修改 app.json

在 plugins 字段中添加配置，显式开启 usesCleartextTraffic：

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]
  }
}
```

  1. 重新构建

    修改配置后，需要重新构建，配置才会写入原生层：

    # 如果是本地 prebuild
npx expo prebuild

# 或直接走 EAS 构建
eas build -p android

注意：开启 usesCleartextTraffic 虽然能解决连接问题，但生产环境建议为后端配置 SSL 证书，使用 HTTPS 以保证通信安全。