17-2 RN之Android端的配置

课程目标

本节课程的目标是：

1. 学习如何通过 react-native-config 配置不同环境的版本信息。
2. 解决 Android 端 HTTP 请求的问题。
3. 优化 console.log 的打印问题，提升性能。
4. 配置 Android 应用的图标，符合 Android 8.0 以上的图标规范。

---

1. 使用 react-native-config 配置多环境支持

1.1 安装最新版本

更新 react-native-config 到最新版本（1.2.0）：

bash
复制
yarn add react-native-config

1.2 配置环境变量

1. 在 .env 文件中添加开发环境的变量：

   plaintext
   复制
   API_URL=http://192.168.199.145:3000
   APP_NAME=听书
   VERSIONCODE=1
   VERSIONNAME=0.1
   

2. 在 android/app/build.gradle 中使用环境变量：

   gradle
   复制
   defaultConfig {
       applicationId "com.ximalaya"
       minSdkVersion rootProject.ext.minSdkVersion
       targetSdkVersion rootProject.ext.targetSdkVersion
       versionCode project.env.get("VERSIONCODE").toInteger()
       versionName project.env.get("VERSIONNAME")
       multiDexEnabled true
   }
   

3. 在 android/app/src/main/res/values/strings.xml 中引用应用名：

   xml
   复制
   <resources>
       <string name="app_name">@string/APP_NAME</string>
   </resources>
   

4. 创建生产环境配置文件 .env.production：

   plaintext
   复制
   API_URL=http://39.105.213.120
   APP_NAME=听书
   VERSIONCODE=1
   VERSIONNAME=0.1
   

---

2. 解决 Android 端 HTTP 请求问题

问题

Android 9.0 及以上版本默认禁止 HTTP 协议，要求使用 HTTPS。

解决方案

1. 创建 network_security_config.xml 文件：

   • 在 res/xml 文件夹下新建文件 network_security_config.xml：

     xml
     复制
     <?xml version="1.0" encoding="utf-8"?>
     <network-security-config>
         <base-config cleartextTrafficPermitted="true" />
     </network-security-config>
     

2. 在 AndroidManifest.xml 中引用该文件：

   xml
   复制
   <application
       ...
       android:networkSecurityConfig="@xml/network_security_config"
       ...
   />
   

3. 效果：编译后即可正常访问 HTTP 请求。

---

3. 优化 console.log 打印问题

问题

console.log 等打印语句在生产环境中会影响性能，但在开发阶段仍需要使用。

解决方案

1. 通过 __DEV__ 替换 console 的打印函数：

   • 在 index.js 中添加以下代码：

     javascript
     复制
     if (!__DEV__) {
         global.console = {
             info: () => {},
             log: () => {},
             warn: () => {},
             debug: () => {},
             error: () => {},
         };
     }
     

2. 重置部分打印函数（可选）：

   javascript
   复制
   if (!__DEV__) {
       const emptyFunc = () => {};
       global.console.info = emptyFunc;
       global.console.log = emptyFunc;
       global.console.warn = emptyFunc;
   }
   

3. 效果：在生产环境中，所有 console 打印语句将被禁用。

---

4. 配置 Android 应用图标

4.1 图标设计规范

1. Android 8.0+ 图标规范：

   • 图标分为两层：前景层 和 背景层。
   • 前景层：展示应用 Logo。
   • 背景层：仅允许定义颜色或纹理，不能定义形状。
   • 最终图标形状由手机厂商的蒙层决定（圆形、圆角矩形等）。

2. 兼容性：

   • Android 8.0 以下版本使用传统的 PNG 图标。
   • Android 8.0 以上版本使用动态图标（XML 文件）。

---

4.2 配置图标

1. 打开 Android Studio：

   • 选择项目的 android 文件夹。

2. 创建应用图标：

   • 在 app 模块下的 res 目录右键选择 New => Image Asset。

   • 配置前景层和背景层：

     • 前景层：选择一张白底图片。
     • 背景层：设置为纯色（如 #807c66）。

   • 点击 Next 并完成。

3. 生成的文件：

   • 在 android/app/src/main/res 目录下生成新文件：

     • anydpi-v26: 包含动态图标的 XML 文件（前景层和背景层）。
     • 其他目录：生成兼容旧版 Android 的 PNG 图标。

4. 效果：重新安装 Android 应用，查看图标效果。

---

5. 总结

5.1 本节内容总结

1. 使用 react-native-config 配置多环境的版本信息。
2. 解决 Android 端 HTTP 请求问题，支持 HTTP 协议访问。
3. 优化 console.log 打印，避免生产环境中影响性能。
4. 配置符合 Android 8.0+ 规范的应用图标。

5.2 思想总结

• 环境配置：通过 .env 文件管理多环境变量，便于开发、测试和生产环境的切换。
• 性能优化：针对生产环境进行日志优化，减少不必要的性能开销。
• 视觉一致性：遵循 Android 图标设计规范，提升用户体验。

---

6. 下一节预告

在下一节中，我们将正式学习如何打包应用并发布到应用商城中，让更多用户可以使用我们的听书应用！