React Native 打包apk

本文详述了使用React Native进行APK签名的过程,包括生成签名密钥、设置Gradle变量、添加签名配置到Gradle文件、启用Proguard代码混淆等步骤,以及解决常见打包问题的方法。

一.生成签名密钥

运行以下命令,运行后会让你输入一些信息密码之类的 ---- 在 Windows 上keytool命令放在 JDK 的 bin 目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin), 你可能需要在命令行中先进入那个目录才能执行此命令 

keytool -genkey -v -keystore release.keystore -alias key-alias -keyalg RSA -keysize 2048 -validity 10000
  • -keystore  release.keystore    文件名 
  • -alias         key-alias               别名, 打包时需要用到
  • -keyalg     RSA                       加密和数字签名的算法
  • -validity    10000                    有效天数

完成之后会生成一个 release.keystore  密钥库文件, 将它放到你工程中的 android/app 文件夹下

二.设置 gradle 变量

编辑 android/gradle.properties (项目配置文件,如果没有就自己创建一个) 加入以下代码

MYAPP_RELEASE_STORE_FILE=release.keystore
MYAPP_RELEASE_KEY_ALIAS=key-alias
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

 

三.添加签名到项目的gradle配置文件

3.1.将以下代码添加到 android/app/build.gradle 文件中,与buildTypes平级

signingConfigs {
    release {
        if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
}

3.2.在  buildTypes 内添加

buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        signingConfig signingConfigs.release  //添加这句话引用签名配置
    }
}

四.启用Proguard代码混淆来缩小APK文件的大小(可选)

Proguard是一个Java字节码混淆压缩工具,它可以移除掉React Native Java(和它的依赖库中)中没有被使用到的部分,最终有效的减少APK的大小

将 android/app/build.gradle 的 def enableProguardInReleaseBuilds 设置为 true

def enableProguardInReleaseBuilds = true  //混淆开关

五.开始打包   在/android/目录中执行以下命令   完成之后 apk 在 android/app/build/outputs/apk

./gradlew assembleRelease

打包遇到的问题1

* What went wrong:
Unable to process incoming event 'ProgressComplete ' (ProgressCompleteEvent)

解决方法:    android 目录中执行以下命令 

gradlew.bat assembleRelease --console plain

打包遇到的问题2

* What went wrong:
Execution failed for task ':app:processReleaseResources'.
> Failed to execute aapt

在 android/gradle.properties 文件中添加  原因

android.enableAapt2=false

 打包遇到的问题3

* What went wrong:
Execution failed for task ':react-native-fetch-blob:verifyReleaseResources'.
> com.android.ide.common.process.ProcessException: Failed to execute aapt

解决:    这个问题只有在打包时才会出现,可以看到我这里是 react-native-fetch-blob 这个包的错误, 找到 node_modules/react-native-fetch-blob/android/build.gradle 将 compileSdkVersion  buildToolsVersion  targetSdkVersion  修改成与 android/build.gradle 中的一致

更多姿势: https://reactnative.cn/docs/signed-apk-android/

<think>嗯,用户的问题是关于React Native打包APK后底部TabBar导航的字体图标丢失,特别是使用了react-native-vector-icons的Ionicons图标。我需要先理解这个问题的常见原因,然后给出解决方案。 首先,可能的原因有哪些呢?通常,字体图标在开发环境正常,但打包后丢失,可能是因为字体文件没有被正确打包APKReact Native Vector Icons库在Android上需要将字体文件添加到assets目录,如果配置不当,打包时可能会遗漏这些文件。 我记得在Android的配置中,需要在android/app/build.gradle里添加字体文件的配置。用户可能没有正确设置apply from: "../../node_modules/react-native-vector-icons/fonts.gradle",或者这个配置的位置不对。另外,有时候清理缓存和重新构建也是必要的,因为旧的构建可能残留错误。 还有可能用户使用了自定义字体,但没有正确链接或配置。需要检查react-native.config.js是否配置了assets,确保字体文件被正确识别。此外,手动检查APK文件中的assets目录是否有字体文件,可以使用Android Studio的APK分析工具查看。 另外,代码层面的问题也可能存在,比如图标名称拼写错误,但用户说开发环境正常,所以更可能是打包配置的问题。需要确保所有步骤都被正确执行,包括Gradle配置、清理构建和重新运行。 可能还需要考虑ProGuard的混淆问题,但通常react-native-vector-icons的ProGuard规则已经包含在库中,不过如果用户有自定义配置,可能需要检查是否有冲突。 总结下来,解决方案的步骤应该是:检查并添加Gradle配置,确保字体文件被正确引入;清理项目并重新构建;检查APK中的字体文件是否存在;验证代码中的图标名称是否正确。如果问题依旧,可能需要手动链接字体或检查ProGuard设置。 需要把这些步骤详细列出,确保用户能一步步跟随操作。同时,生成的相关问题可以包括字体加载原理、其他图标库的使用、性能优化等。</think>### React Native打包APK后TabBar字体图标丢失的解决方案 #### 1. 检查字体文件配置 **核心问题**:Android打包时未正确包含字体文件。 **步骤**: - 在 `android/app/build.gradle` 中添加以下配置(确保在 `dependencies` 代码块前): ```gradle apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ``` 此脚本会自动将 `react-native-vector-icons` 的字体文件复制到APK的assets目录[^1]。 #### 2. 验证字体文件是否被正确引入 - 使用Android Studio的 **APK Analyzer** 检查生成的APK文件: - 路径:`assets/fonts` 应包含 `Ionicons.ttf` 等字体文件。 - 若无字体文件,说明Gradle配置未生效。 #### 3. 清理并重新构建项目 ```bash # 清理Android项目缓存 cd android && ./gradlew clean && cd .. # 重新安装依赖并运行 npm install npx react-native run-android --variant=release ``` #### 4. 代码层验证 - 确保图标名称拼写正确: ```jsx <Icon name="ios-home" size={30} color="#900" /> // Ionicons前缀为"ios-"或"md-" ``` - 若使用自定义图标集,需手动链接字体文件(通过`react-native.config.js`): ```javascript module.exports = { dependencies: { 'react-native-vector-icons': { platforms: { android: null // 禁用自动链接,改为手动配置 } } } }; ``` #### 5. ProGuard混淆问题(可选) 在 `android/app/proguard-rules.pro` 中添加: ``` -keep class com.oblador.vectoricons.** { *; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值