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

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

2.1 打包与发布概述

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

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

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

2.2 Android 平台打包与发布

2.2.1 配置应用信息

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

设置版本号和版本名称：

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

groovy 复制代码

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

设置包名：

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

groovy 复制代码

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

2.2.2 生成签名证书

生成签名密钥库：
bash 复制代码
```
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: 密钥有效期（天）。
将密钥库文件放置在 android/app 目录下。

2.2.3 配置签名证书

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

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

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

groovy 复制代码

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 打包应用

使用 React Native CLI 打包 APK:
bash 复制代码
```
cd android
./gradlew assembleRelease
```
- 打包完成后，APK 文件位于 android/app/build/outputs/apk/release/app-release.apk。
使用 Android Studio 打包 APK:
- 打开 Android Studio，打开项目。
- 选择 Build -> Generate Signed Bundle / APK。
- 选择 APK，点击 Next。
- 选择签名密钥库，输入密钥别名和密码，点击 Next。
- 选择构建类型（Release），点击 Finish。

2.2.5 发布应用

注册 Google Play Developer 账号：
- 前往 Google Play Console 注册账号。
创建应用条目：
- 在 Google Play Console 中创建一个新的应用条目。
上传 APK：
- 在应用条目中，上传打包好的 APK 文件。
填写应用信息：
- 填写应用名称、描述、图标、截图等信息。
提交审核：
- 提交应用审核，等待 Google 审核通过后，应用即可上线。

2.3 iOS 平台打包与发布

2.3.1 配置应用信息

设置应用名称和图标:
- 在 Xcode 中，打开项目，设置应用名称和图标。
设置版本号和构建号:
- 在 Xcode 中，选择项目目标，进入 General 标签，设置 Version 和 Build。
设置 Bundle Identifier:
- 在 Xcode 中，设置应用的 Bundle Identifier。

2.3.2 生成签名证书

生成签名证书:
- 前往 Apple Developer 网站，登录账号。
- 在 Certificates, Identifiers & Profiles 中，创建一个新的证书（App Store and Ad Hoc）。
生成 Provisioning Profile:
- 创建一个新的 Provisioning Profile，选择刚刚创建的证书和 Bundle Identifier。
下载证书和 Provisioning Profile，并双击安装到 Xcode 中。

2.3.3 打包应用

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

2.3.4 发布应用

注册 Apple Developer 账号:
- 前往 Apple Developer 网站，注册账号。
创建应用条目:
- 登录 App Store Connect 网站，创建一个新的应用条目。
上传构建版本:
- 在应用条目中，上传打包好的 IPA 文件。
填写应用信息:
- 填写应用名称、描述、图标、截图等信息。
提交审核:
- 提交应用审核，等待 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 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

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