React Native 全栈开发实战班 - 性能与调试之打包与发布

在完成 React Native 应用的开发与性能优化后，下一步就是将应用打包并发布到各大应用市场，如 Apple App Store 和 Google Play Store。本章节将详细介绍 React Native 应用的打包与发布流程，包括 Android 和 iOS 平台的打包步骤、签名配置、发布到应用市场以及常见问题与解决方案。

---

2.1 打包与发布概述

打包 是指将 React Native 应用代码和资源文件编译成平台特定的安装包（APK 或 IPA）。发布 是指将打包好的应用上传到应用市场，供用户下载安装。

React Native 应用打包与发布的主要步骤：

1. 配置应用信息： 设置应用名称、版本号、包名等。
2. 生成签名证书： 为应用生成签名证书，用于签名 APK 或 IPA 文件。
3. 配置签名证书： 将签名证书配置到项目中。
4. 打包应用： 使用 React Native CLI 或 Android Studio/Xcode 打包应用。
5. 发布应用： 将打包好的应用上传到 Apple App Store 或 Google Play Store。

---

2.2 Android 平台打包与发布

2.2.1 配置应用信息

1. 设置应用名称和图标：

   • 在 android/app/src/main/res/values/strings.xml 文件中设置应用名称。
   • 将应用图标放置在 android/app/src/main/res/mipmap-*/ 目录下。

2. 设置版本号和版本名称：

   • 在 android/app/build.gradle 文件中设置 versionCode 和 versionName。

   android {
       ...
       defaultConfig {
           ...
           versionCode 1
           versionName "1.0"
           ...
       }
       ...
   }

3. 设置包名：

   • 在 android/app/build.gradle 文件中设置 applicationId。

   android {
       ...
       defaultConfig {
           ...
           applicationId "com.example.myapp"
           ...
       }
       ...
   }

2.2.2 生成签名证书

1. 生成签名密钥库：

   keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

   • my-release-key.keystore: 密钥库文件名。
   • my-key-alias: 密钥别名。
   • RSA: 加密算法。
   • 2048: 密钥长度。
   • 10000: 密钥有效期（天）。

2. 将密钥库文件放置在 android/app 目录下。

2.2.3 配置签名证书

1. 编辑 android/gradle.properties 文件，添加以下内容：

   MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
   MYAPP_RELEASE_KEY_ALIAS=my-key-alias
   MYAPP_RELEASE_STORE_PASSWORD=your_store_password
   MYAPP_RELEASE_KEY_PASSWORD=your_key_password

2. 编辑 android/app/build.gradle 文件，添加签名配置：

   android {
       ...
       defaultConfig {
           ...
       }
       signingConfigs {
           release {
               storeFile file(MYAPP_RELEASE_STORE_FILE)
               storePassword MYAPP_RELEASE_STORE_PASSWORD
               keyAlias MYAPP_RELEASE_KEY_ALIAS
               keyPassword MYAPP_RELEASE_KEY_PASSWORD
           }
       }
       buildTypes {
           release {
               ...
               signingConfig signingConfigs.release
           }
       }
       ...
   }

2.2.4 打包应用

1. 使用 React Native CLI 打包 APK:

   cd android
   ./gradlew assembleRelease

   • 打包完成后，APK 文件位于 android/app/build/outputs/apk/release/app-release.apk。

2. 使用 Android Studio 打包 APK:

   • 打开 Android Studio，打开项目。
   • 选择 Build -> Generate Signed Bundle / APK。
   • 选择 APK，点击 Next。
   • 选择签名密钥库，输入密钥别名和密码，点击 Next。
   • 选择构建类型（Release），点击 Finish。

2.2.5 发布应用

1. 注册 Google Play Developer 账号：

   • 前往 Google Play Console 注册账号。

2. 创建应用条目：

   • 在 Google Play Console 中创建一个新的应用条目。

3. 上传 APK：

   • 在应用条目中，上传打包好的 APK 文件。

4. 填写应用信息：

   • 填写应用名称、描述、图标、截图等信息。

5. 提交审核：

   • 提交应用审核，等待 Google 审核通过后，应用即可上线。

---

2.3 iOS 平台打包与发布

2.3.1 配置应用信息

1. 设置应用名称和图标:

   • 在 Xcode 中，打开项目，设置应用名称和图标。

2. 设置版本号和构建号:

   • 在 Xcode 中，选择项目目标，进入 General 标签，设置 Version 和 Build。

3. 设置 Bundle Identifier:

   • 在 Xcode 中，设置应用的 Bundle Identifier。

2.3.2 生成签名证书

1. 生成签名证书:

   • 前往 Apple Developer 网站，登录账号。
   • 在 Certificates, Identifiers & Profiles 中，创建一个新的证书（App Store and Ad Hoc）。

2. 生成 Provisioning Profile:

   • 创建一个新的 Provisioning Profile，选择刚刚创建的证书和 Bundle Identifier。

3. 下载证书和 Provisioning Profile，并双击安装到 Xcode 中。

2.3.3 打包应用

1. 使用 Xcode 打包 IPA:

   • 打开 Xcode，打开项目。
   • 选择 Product -> Archive。
   • 归档完成后，点击 Distribute App。
   • 选择 App Store Connect，点击 Next。
   • 选择 Upload，点击 Next。
   • 选择签名证书和 Provisioning Profile，点击 Next。
   • 点击 Upload，上传应用。

2.3.4 发布应用

1. 注册 Apple Developer 账号:

   • 前往 Apple Developer 网站，注册账号。

2. 创建应用条目:

   • 登录 App Store Connect 网站，创建一个新的应用条目。

3. 上传构建版本:

   • 在应用条目中，上传打包好的 IPA 文件。

4. 填写应用信息:

   • 填写应用名称、描述、图标、截图等信息。

5. 提交审核:

   • 提交应用审核，等待 Apple 审核通过后，应用即可上线。

---

2.4 常见问题与解决方案

2.4.1 签名错误

问题: 签名证书配置错误，导致打包失败。

解决方案:

• 确认签名密钥库文件路径、密钥别名、密码是否正确。
• 确认 build.gradle 文件中签名配置是否正确。

2.4.2 权限问题

问题: 应用缺少必要的权限，导致应用无法正常运行。

解决方案:

• 确认 AndroidManifest.xml 和 Info.plist 文件中是否正确配置了所有必要的权限。
• 确认应用运行时是否正确请求了必要的权限。

2.4.3 资源缺失

问题: 应用缺少必要的资源文件，导致应用无法正常运行。

解决方案:

• 确认所有资源文件是否正确添加到项目中。
• 确认资源文件路径是否正确。

2.4.4 网络问题

问题: 网络请求失败，导致应用无法获取数据。

解决方案:

• 确认网络连接是否正常。
• 确认 API 地址和参数是否正确。
• 确认服务器是否正常运行。

---

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师