当前位置： 首页 > news >正文

React Native 构建与打包发布（iOS + Android）

news 来源：原创 2025/6/14 6:31:27

React Native 是一个强大的跨平台移动应用开发框架，允许开发者使用 JavaScript 和 React 构建同时运行在 iOS 和 Android 上的应用程序。然而，将 React Native 应用从开发环境迁移到生产环境并发布到应用商店需要一系列复杂的构建和打包步骤。本文将详细介绍如何在 Android 和 iOS 平台上构建和打包 React Native 应用，包括 Android 的打包签名配置、iOS 的证书配置（含 Xcode）、使用 EAS（Expo Application Services）发布应用，以及多环境管理和灰度发布策略。通过本文的指导，您将能够掌握完整的部署流程，确保应用以最佳性能运行在用户设备上，并顺利通过应用商店审核。

本文将通过深入的步骤说明、代码示例和最佳实践建议，为初学者和有经验的开发者提供全面的参考。以下是本文的结构：

  1. 引言：构建与打包的重要性
  2. Android 打包签名配置
  3. iOS 打包证书配置（含 Xcode）
  4. 使用 EAS / Expo 发布
  5. 多环境管理与灰度发布
  6. 综合示例：完整的构建与发布流程
  7. 结论与进一步学习建议

1. 引言：构建与打包的重要性

构建和打包是移动应用开发中的核心环节，它将开发阶段的代码和资源转化为可在用户设备上运行的二进制文件。对于 React Native 应用来说，构建过程涉及将 JavaScript 代码、原生模块和资源文件打包为 Android 的 APK 或 AAB 文件，以及 iOS 的 IPA 文件。同时，为了确保应用的安全性和应用商店的合规性，必须对这些文件进行签名。

1.1 为什么需要构建和打包？

  • 性能优化：生产模式的构建会压缩代码、移除调试信息，从而提升应用的运行效率。
  • 安全性：通过签名机制，确保应用在分发过程中不被篡改。
  • 商店合规性：Google Play 和 App Store 要求提交经过签名的二进制文件。

1.2 本文目标

本文旨在帮助您：

  • 掌握 Android 的签名配置并生成 APK/AAB 文件。
  • 配置 iOS 的开发和分发证书，生成 IPA 文件。
  • 使用 EAS 简化构建和发布流程。
  • 实现多环境管理和灰度发布策略。

无论您是使用纯 React Native 项目还是 Expo 管理的项目，本文都将提供适用的解决方案。

2. Android 打包签名配置

在 Android 平台上，应用需要使用密钥库（Keystore）进行签名，以验证开发者的身份并确保应用在安装和更新时的完整性。本节将详细介绍如何生成密钥库、配置签名并生成 APK 和 AAB 文件。

2.1 生成密钥库

密钥库是 Android 签名的核心，包含公钥和私钥对。可以使用 Java 自带的 keytool 工具生成密钥库文件。

2.1.1 生成命令

在终端中运行以下命令：

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
2.1.2 参数说明
  • -keystore：指定密钥库文件名，例如 my-release-key.keystore。
  • -alias：密钥的别名，例如 my-key-alias。
  • -keyalg：加密算法，推荐使用 RSA。
  • -keysize：密钥长度，推荐 2048 位。
  • -validity：密钥有效期（单位：天），建议设置为 10000 天（约 27 年）。

运行命令后，系统会提示输入：

  • 密钥库密码（Store Password）。
  • 密钥密码（Key Password）。
  • 个人信息（如姓名、组织等）。

完成后，密钥库文件将保存在当前目录下。

2.1.3 安全建议
  • 将密钥库文件和密码妥善保存，避免泄露。
  • 将密钥库文件添加到 .gitignore，防止上传到版本控制系统。

2.2 配置 Gradle

React Native 的 Android 项目使用 Gradle 构建系统，需要在 android/app/build.gradle 文件中配置签名信息。

2.2.1 编辑 build.gradle

在 android/app/build.gradle 中添加以下签名配置：

android {...defaultConfig {applicationId "com.yourapp"minSdkVersion 21targetSdkVersion 31versionCode 1versionName "1.0"}signingConfigs {release {storeFile file('my-release-key.keystore')storePassword 'your-store-password'keyAlias 'my-key-alias'keyPassword 'your-key-password'}}buildTypes {release {minifyEnabled trueproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'signingConfig signingConfigs.release}}
}
2.2.2 配置说明
  • storeFile：密钥库文件的路径，建议将文件放在 android/app/ 目录下。
  • storePassword：密钥库密码。
  • keyAlias：密钥别名。
  • keyPassword：密钥密码。
  • minifyEnabled：启用代码压缩，优化应用体积。
  • proguardFiles：指定 ProGuard 规则，用于代码混淆和优化。
2.2.3 安全存储密码

为了避免将密码硬编码在 build.gradle 中，可以使用属性文件存储敏感信息：

  1. 在 ~/.gradle/gradle.properties 中添加：
    MYAPP_RELEASE_STORE_PASSWORD=your-store-password
MYAPP_RELEASE_KEY_PASSWORD=your-key-password
  2. 修改 build.gradle：
    signingConfigs {release {storeFile file('my-release-key.keystore')storePassword System.getenv("MYAPP_RELEASE_STORE_PASSWORD") ?: MYAPP_RELEASE_STORE_PASSWORDkeyAlias 'my-key-alias'keyPassword System.getenv("MYAPP_RELEASE_KEY_PASSWORD") ?: MYAPP_RELEASE_KEY_PASSWORD}
}

2.3 生成 APK/AAB

2.3.1 生成 APK

APK（Android Package）是传统的 Android 应用包格式。运行以下命令生成签名的 APK：

cd android
./gradlew assembleRelease
  • 生成的文件位于 android/app/build/outputs/apk/release/app-release.apk。
  • 使用 adb install app-release.apk 安装到设备上进行测试。
2.3.2 生成 AAB

AAB（Android App Bundle）是 Google Play 推荐的格式，支持动态交付和优化。运行以下命令：

cd android
./gradlew bundleRelease
  • 生成的文件位于 android/app/build/outputs/bundle/release/app-release.aab。
  • AAB 文件需要上传到 Google Play Console，由其生成优化后的 APK。
2.3.3 APK vs AAB
格式优点缺点
APK简单直接，可手动安装文件较大，不支持动态交付
AAB支持动态交付，优化文件大小需 Google Play 处理

2.4 发布到 Google Play

2.4.1 前置条件
  • 创建 Google Play 开发者账户（需支付 $25 一次性费用）。
  • 准备应用图标、截图和描述。
2.4.2 发布步骤
  1. 登录 Google Play Console。
  2. 创建新应用，填写基本信息。
  3. 上传 AAB 文件到 “应用版本” 页面。
  4. 配置发布选项（如国家/地区、定价）。
  5. 提交审核。
2.4.3 测试与灰度发布
  • 内部测试：邀请团队成员测试应用。
  • 分阶段发布：逐步向部分用户推出新版本，控制 rollout 百分比。

2.5 最佳实践

  • 备份密钥库：将 Keystore 文件存储在安全位置，并记录密码。
  • 版本管理：在 defaultConfig 中递增 versionCode 和 versionName。
  • 自动化构建：使用 CI/CD 工具（如 GitHub Actions）自动生成 AAB。

3. iOS 打包证书配置（含 Xcode）

在 iOS 平台上，应用需要使用 Apple 提供的证书和配置文件（Provisioning Profile）进行签名。本节将介绍如何配置证书并使用 Xcode 构建和发布应用。

3.1 配置开发和分发证书

3.1.1 获取证书
  1. 登录 Apple Developer 网站。
  2. 在 “Certificates, Identifiers & Profiles” 中选择 “Certificates”。
  3. 点击 “+” 创建新证书：
    • 开发证书：选择 “Apple Development”。
    • 分发证书：选择 “App Store and Ad Hoc”。
  4. 生成证书请求（CSR）：
    • 打开 “Keychain Access” > “证书助理” > “从证书颁发机构请求证书”。
    • 保存 CSR 文件并上传到 Apple Developer 网站。
  5. 下载证书并双击安装到 Keychain Access。
3.1.2 创建 App ID
  1. 在 “Identifiers” 中创建 App ID。
  2. 设置 Bundle ID（例如 com.yourcompany.yourapp），与项目中的 Info.plist 一致。
  3. 启用所需功能（如 Push Notifications）。
3.1.3 创建 Provisioning Profile
  1. 在 “Profiles” 中创建配置文件：
    • 开发：选择 “iOS App Development”。
    • 分发：选择 “App Store”。
  2. 关联 App ID 和证书。
  3. 下载 Profile 文件并双击安装到 Xcode。

3.2 使用 Xcode 构建应用

3.2.1 打开项目

在项目根目录下，打开 ios/[YourApp].xcworkspace 文件（而非 .xcodeproj）。

3.2.2 配置签名
  1. 在 Xcode 中选择项目目标。
  2. 在 “Signing & Capabilities” 中：
    • 选择 Team（您的 Apple Developer 账户）。
    • 设置 Bundle Identifier。
    • 选择 Provisioning Profile。
  3. 确保 “Automatically manage signing” 已启用（推荐初学者使用）。
3.2.3 构建和归档
  1. 在顶部设备选择器中，选择 “Any iOS Device (arm64)”。
  2. 点击 “Product” > “Archive” 生成归档文件。
  3. 构建完成后，Xcode 将打开 “Organizer” 窗口。
3.2.4 导出 IPA
  1. 在 Organizer 中选择刚刚生成的 Archive。
  2. 点击 “Distribute App”。
  3. 选择分发方式：
    • “App Store Connect”：用于提交到 App Store。
    • “Ad Hoc”：用于内部测试。
  4. 按照提示完成导出，生成 .ipa 文件。

3.3 发布到 App Store

3.3.1 创建 App Store Connect 记录
  1. 登录 App Store Connect。
  2. 点击 “我的应用” > “+” 创建新应用。
  3. 填写应用名称、Bundle ID 和版本信息。
3.3.2 上传 IPA
  1. 在 Xcode 的 Organizer 中选择 “Distribute App” > “App Store Connect”。
  2. 登录 Apple ID 并上传 IPA 文件。
  3. 或者使用独立工具（如 Transporter）上传。
3.3.3 提交审核
  1. 在 App Store Connect 中填写应用详情：
    • 应用描述。
    • 截图（不同设备尺寸）。
    • 关键词和隐私政策。
  2. 提交审核，通常需要 1-3 天。

3.4 测试与灰度发布

  • TestFlight：Apple 提供的测试平台。
    • 在 App Store Connect 中添加测试用户。
    • 上传 IPA 并邀请用户测试。
  • 分阶段发布：在 App Store 中设置逐步推出新版本。

3.5 最佳实践

  • 证书管理：定期检查证书和 Profile 的有效期。
  • 自动化：使用 Fastlane 自动化构建和提交流程。
  • 调试：在真机上测试签名后的应用，确保功能正常。

4. 使用 EAS / Expo 发布

Expo Application Services (EAS) 是一个云服务，旨在简化 React Native 应用的构建、提交和更新流程。它适用于 Expo 项目和裸 React Native 项目，无需本地安装 Android Studio 或 Xcode。

4.1 EAS Build

EAS Build 在云端执行构建任务，支持 Android 和 iOS 平台。

4.1.1 安装 EAS CLI
npm install -g eas-cli
4.1.2 配置 EAS

在项目根目录下创建 eas.json 文件：

{"build": {"development": {"developmentClient": true,"distribution": "internal","android": {"buildType": "apk"},"ios": {"simulator": true}},"production": {"distribution": "store"}}
}
  • development：用于开发和内部测试。
  • production：用于生产发布。
4.1.3 构建应用

运行以下命令：

eas build --profile development --platform all
  • --profile：指定构建配置。
  • --platform：选择 android、ios 或 all。
  • 构建完成后，EAS 将提供下载链接或 QR 码。
4.1.4 配置凭据
  • Android：上传 Keystore 文件或让 EAS 生成。
  • iOS：提供 Apple Developer 账户凭据，EAS 将管理证书和 Profile。

4.2 EAS Submit

EAS Submit 将构建好的应用提交到应用商店。

4.2.1 提交到 Google Play
eas submit --platform android
  • 需要配置 Google Play Console 的服务账户密钥。
4.2.2 提交到 App Store
eas submit --platform ios
  • 需要 Apple ID 和 App Store Connect 凭据。

4.3 EAS Update

EAS Update 允许在不重新提交应用商店的情况下更新 JavaScript 代码和资源，支持灰度发布。

4.3.1 配置 EAS Update

在 eas.json 中启用更新：

{"build": {"production": {"update": {"enabled": true,"channel": "production"}}}
}
4.3.2 发布更新
eas update --branch production --message "修复 bug"
  • 更新将通过 OTA（Over-the-Air）方式推送给用户。
4.3.3 灰度发布

通过分支和渠道管理，控制更新的推送范围：

eas update --branch staging
eas channel:edit production --branch staging

4.4 EAS 的优势

  • 简化流程：无需本地配置开发环境。
  • 跨平台支持：同时构建 Android 和 iOS 应用。
  • 快速更新：通过 EAS Update 实现热更新。

4.5 最佳实践

  • CI/CD 集成：将 EAS 命令加入 GitHub Actions。
  • 凭据管理：使用 EAS 的凭据存储功能。
  • 监控：结合 EAS Insights 跟踪构建状态。

5. 多环境管理与灰度发布

在实际开发中，应用通常需要支持多个环境（如开发、测试、生产），并通过灰度发布逐步推出新功能。

5.1 多环境管理

5.1.1 使用 react-native-config

react-native-config 是一个流行的库，用于管理环境变量。

  1. 安装：
    npm install react-native-config
  2. 创建环境文件：
    • .env.dev：
      API_URL=https://dev.api.example.com
    • .env.prod：
      API_URL=https://api.example.com
  3. 配置 Gradle（Android）：
    project.ext.envConfigFiles = [debug: ".env.dev",release: ".env.prod"
]
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
  4. 配置 Xcode（iOS）：
    • 在 Build Settings 中添加用户定义变量 ENVFILE，值为 .env.dev 或 .env.prod。
  5. 在代码中使用：
    import Config from 'react-native-config';const API_URL = Config.API_URL;
console.log(API_URL); // 根据构建环境输出对应 URL
5.1.2 使用 EAS 环境变量

在 eas.json 中为不同环境定义变量：

{"build": {"development": {"env": {"API_URL": "https://dev.api.example.com"}},"production": {"env": {"API_URL": "https://api.example.com"}}}
}

5.2 灰度发布

5.2.1 使用 CodePush

CodePush 是微软提供的热更新服务，支持 React Native 应用。

  1. 安装：
    npm install react-native-code-push
  2. 配置 Android：
    apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
  3. 配置 iOS：
    • 在 Info.plist 中添加 CodePush 密钥。
  4. 包装应用：
    import codePush from 'react-native-code-push';let App = () => {return <YourApp />;
};App = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_START })(App);
export default App;
  5. 发布更新：
    code-push release-react MyApp android -d Staging
  6. 灰度发布：
    code-push promote MyApp Staging Production --rollout 10%
5.2.2 使用 EAS Update

EAS Update 提供类似功能，支持更灵活的渠道管理。

  1. 配置（见 4.3.1）。
  2. 发布更新：
    eas update --branch production
  3. 灰度发布：
    • 创建测试分支：
      eas branch:create beta
eas update --branch beta
    • 推广到生产：
      eas channel:edit production --branch beta

5.3 最佳实践

  • 环境隔离：为每个环境使用独立的 API 和配置。
  • 测试先行：在灰度发布前进行充分测试。
  • 回滚计划：准备旧版本代码以应对问题。

6. 综合示例：完整的构建与发布流程

以下是一个结合 EAS 和多环境管理的完整流程。

6.1 配置项目

  1. 创建 eas.json：
    {"build": {"development": {"developmentClient": true,"distribution": "internal","env": {"API_URL": "https://dev.api.example.com"}},"production": {"distribution": "store","env": {"API_URL": "https://api.example.com"}}}
}
  2. 配置 react-native-config（如 5.1.1）。

6.2 构建开发版本

eas build --profile development --platform all
  • 测试人员通过 QR 码安装并验证功能。

6.3 构建生产版本

eas build --profile production --platform all

6.4 提交到应用商店

eas submit --platform all

6.5 发布更新

eas update --branch production --message "修复登录问题"

6.6 灰度发布

  1. 创建测试分支：
    eas branch:create beta
eas update --branch beta
  2. 推广到生产：
    eas channel:edit production --branch beta

7. 结论与进一步学习建议

7.1 总结

本文详细介绍了 React Native 应用的构建与打包发布流程，涵盖：

  • Android 的签名配置和 APK/AAB 生成。
  • iOS 的证书配置和 IPA 生成。
  • 使用 EAS 简化构建和提交。
  • 多环境管理和灰度发布策略。

通过这些步骤，您可以将 React Native 应用从开发环境顺利部署到生产环境，并实现持续优化。

7.2 挑战与解决方案

挑战解决方案
签名配置复杂使用 EAS Build 自动化
证书管理繁琐借助 EAS 或 Fastlane
环境切换麻烦使用 react-native-config
更新发布耗时利用 CodePush 或 EAS Update

7.3 进一步学习建议

  • 实践：为一个简单 React Native 项目配置完整的发布流程。
  • 文档：阅读 React Native 官方文档、EAS 文档。
  • 工具：探索 Fastlane 和 CI/CD 自动化。
  • 社区：参与 React Native 社区讨论，获取最新技术动态。

相关文章：

  • 电脑虚拟网卡安装（添加以太网2）
  • 将包含父子关系的扁平列表 List＜Demo＞ 转换成树形结构的 List＜DemoVO＞，每个节点包含自己的子节点列表
  • Python 轻量化环境管理利器 UV 入门与 Windows 下安装实战
  • 【结合JSR380自定义校验】
  • 神经网络压缩
  • PHP基础-运算符
  • 用AI思维重塑人生：像训练神经网络一样优化自己
  • Java EE 导读
  • 【Create my OS】1 最小内核
  • MySQL-DDL语句深度解析与实战指南
  • Web开发实战：Gin + GORM 构建企业级 API 项目
  • RabbitMQ的使用--项目创建、五种工作模式、高级特性
  • Blender 4.4.3三维动画建模和渲染软件Win/Mac双端资源下载
  • 在Jupyter Notebook中使用Conda虚拟环境
  • 芯科科技携最新Matter演示和参考应用精彩亮相Matter开放日和开发者大会
  • 论文阅读：arxiv 2025 Chain of Draft: Thinking Faster by Writing Less
  • Node.js 检测视频链接是否可以播放(批量检测）
  • CSS a标签内文本折行展示
  • 论文阅读：arxiv 2025 Not All Tokens Are What You Need In Thinking
  • 用 HTML、CSS 和 JavaScript 实现五子棋人机对战游戏
  • 榆林市 网站建设/打开百度一下
  • 网站开发项目延期说明/seo刷排名公司
  • wordpress站点标题看不到/阿里云com域名注册
  • 做网站_接活/2345网址导航官网下载
  • 国外域名的网站怎么做/手机优化大师怎么退款
  • 浙江建设工程造价信息网站/网络营销软件站