react-native开发Android篇——修改包名、打包apk、TypeError: Network request failed_rn修改包名

打包apk文档：https://reactnative.cn/docs/signed-apk-android/。

修改包名（测试包名为com.rn.test）

1. 修改android/app/src/main/java/com目录下的MainActivity.java和MainApplication.java文件的第一句；

   package com.rn.test;
   1

2. 修改android/app/src/main目录下的AndroidManifest.xml文件；

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.rn.test">
   1
   2

3. 修改android/app目录下的BUCK文件的android_build_config和android_resource里面的package = "com.rn.test"；

   android_build_config(
       name = "build_config",
   	package = "com.rn.test",//修改
   )
   
   android_resource(
       name = "res",
       package = "com.rn.test",//修改
       res = "src/main/res",
   )
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

4. 修改android/app目录下的build.gradle文件的applicationId；

   defaultConfig {
   	 applicationId "com.rn.test"//修改
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
   1
   2
   3
   4
   5
   6
   7

5. 根据包名修改MainActivity.java和MainApplication.java的路径

   在android/app/src/main/java/com目录下新建rn文件夹，然后在rn文件夹下新建test文件夹，最后把MainActivity.java和MainApplication.java移动到test文件夹下。
   完成后MainActivity.java和MainApplication.java的文件路径是：

   android/app/src/main/java/com/rn/tect/ MainActivity.java
   android/app/src/main/java/com/rn/tect/ MainApplication.java
   1
   2

生成一个签名密钥

进入项目根路径执行keytool命令生成一个私有密钥。

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

1. 命令参数说明

   说明
   yalg
   lidity
   ias
   ystore

2. 执行命令的步骤图

3. 结果

   执行完上述命令后会在项目根目录下出现my-release-key.keystore文件。
   

设置gradle变量

1. 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
2. 打开android/app/目录下的build.gradle文件添加签名配置

    signingConfigs {
         debug {
             storeFile file('debug.keystore')
             storePassword 'android'
             keyAlias 'androiddebugkey'
             keyPassword 'android'
         }
   	  release {
             keyAlias 'my-key-alias'  //别名
             keyPassword '您的密码' //密钥密码 之前设置秘钥口令
             storeFile file('my-release-key.keystore') //my-release-key.keystore文件的绝对路径
             storePassword '您的密码' //存储密码
         }
    }
    buildTypes {
          debug {
              signingConfig signingConfigs.debug
          }
          release {
   		   signingConfig signingConfigs.release // 引用签名
              minifyEnabled enableProguardInReleaseBuilds
              proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
          }
    }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

缩小APK文件的大小

启用Proguard代码混淆来缩小APK文件的大小（apk体积减少1M左右）

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

重要：启用Proguard之后，你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原生库做一些额外的配置。参见app/proguard-rules.pro文件。
打开android/app/目录下的build.gradle文件修改enableProguardInReleaseBuilds 为true。

def enableProguardInReleaseBuilds = false//将false改为true
1

根据不同的CPU打包来缩小APK文件的大小（apk体积减少4M左右）

def enableSeparateBuildPerCPUArchitecture = false//将false改为true
//如果需要打一个通用的包就设置universalApk为true，我上线使用的是app-armeabi-v7a-release.apk
1
2

生成发行APK包

修改apk包的名称（当enableProguardInReleaseBuilds 为true时）

打开android/app/目录下的build.gradle文件，添加applicationVariants.all：

buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://facebook.github.io/react-native/docs/signed-apk-android.
            //signingConfig signingConfigs.debug
			signingConfig signingConfigs.release // 引用签名
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
			// 以下修改打包的apk名称
            applicationVariants.all{ variant ->
                def buildName = variant.buildType.name
                variant.outputs.all { output -> 
                    def outputFile = output.outputFile
                    if(outputFile != null && outputFile.name.endsWith('.apk')){
                        if(buildName == 'debug'){
                            def fileName = "app-debug.apk"
                            outputFileName = fileName
                        } else if (buildName == 'release'){
                            def fileName = "app名称-渠道名-状态-${releaseTime()}.apk"
                            //def fileName = "LaoMaShiTu-huawei-release-${releaseTime()}.apk"
                            //渠道名:通用:general, 华为:huawei
                            //状态:release:正式上线包, debug:内部测试包
                            //时间：20191219143000
                            outputFileName = fileName
                        }
                    }
                }
            }
        }
    }
//获取系统时间，写在android{}中
def releaseTime() {
  	return new Date().format("yyyyMMddHHmmss", TimeZone.getTimeZone("GMT+08:00"))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在android目录下执行gradlew assembleRelease

cd 项目路径/android
gradlew assembleRelease//windows系统
//./gradlew assembleRelease   macOS和Linux系统
1
2
3

在项目根目录下的package.json配置打包命令

1. 在package.json的scripts里面添加"bundle-window-android": "cd android && gradlew assembleRelease"

   "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "start": "react-native start",
      "bundle-win-android": "cd android && gradlew assembleRelease",
      "test": "jest",
      "lint": "eslint ."
    },
   1
   2
   3
   4
   5
   6
   7
   8

2. 执行打包命令

   npm  run bundle-win-android
   或者 yarn run bundle-win-android
   1
   2

android 9使用http请求报错TypeError: Network request failed

打包以后在手机上安装测试，在其他的手机都没问题，但是到华为pro30的时候请求报错TypeError: Network request failed，完全不知道啥原因，在网上查了两个小时无果，问做android开发的小姐姐才知道android 9使用http要加网络适配，以下就是操作步骤，本人亲测成功了。开心！开心！开心！

1. 在android/app/src/main/res目录下新建xml文件夹，然后在xml文件夹下新建一个xml文件network_security_config.xml，代码如下所示：

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <base-config cleartextTrafficPermitted="true" />
   </network-security-config>
   1
   2
   3
   4

2. 给android/app/src/main目录下的AndroidManifest.xml文件添加网络适配android:networkSecurityConfig="@xml/network_security_config"。

    <application
         android:name=".MainApplication"
         android:label="@string/app_name"
         android:icon="@mipmap/ic_launcher"
         android:networkSecurityConfig="@xml/network_security_config"
         android:allowBackup="false"
         android:theme="@style/AppTheme">
         ...其他代码
       </application>
   1
   2
   3
   4
   5
   6
   7
   8
   9