在介绍 React-Native Android/IOS
应用图标配置之前,我想先介绍一下 React-Native 多环境
配置问题。
react-native-config
react-native-config
是配置 React Native App 的变量的一个第三方库。
安装
yarn add react-native-config
Android
安装完 react-native-config 后,在 android/app/build.gradle 添加下面代码:
// 2nd line, add a new apply:
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
iOS
cd ios && pod install && cd ..
添加 .env 文件
- .env
- .env.production
API_URL=https://production.com/
使用变量
切换不同的环境
react-native-config 默认读取 .env 文件中的变量,如果想要切换不同的环境的话,可以采用如下方法:
$ ENVFILE=.env.production react-native run-ios/run-android # bash
$ SET ENVFILE=.env.production && react-native run-ios/run-android # windows
$ env:ENVFILE=".env.production"; react-native run-ios/run-android # powershell
Native 配置
在 .env 文件里添加变量
APP_NAME=蜂巢
VERSION_CODE=1
VERSION_NAME=1.0.0
Android
在 android/app/build.gradle
文件修改 versionCode 、versionName
versionCode project.env.get('VERSION_CODE').toInteger()
versionName project.env.get('VERSION_NAME')
在 android/app/src/main/res/values/strings.xml
应用名称
<resources>
<string name="app_name">@string/APP_NAME</string>
</resources>
Android 9.0 以上系统不允许 Http 协议
这里说一下和 react-native-config 无关的。以前我在做 React-Native APP 的时候用到微信头像,当时微信头像的图片地址是 http
协议,在开发环境是没有问题,但是在生产环境就有问题
,究其原因是 Android 9.0 以上系统不允许 Http 协议
,但我们可以通过配置来解决这个问题。
- 在
android/app/src/main/res/
文件夹下新建xml
文件夹,然后添加network_security_config.xml
文件,文件内容如下:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
- 在
android/app/src/main/AndroidManifest.xml
添加下面代码
android:networkSecurityConfig="@xml/network_security_config"
iOS
- 创建一个 Config.xcconfig 文件,并添加如下代码:
#include? "tmp.xcconfig"
- 将以下内容添加到
.gitignore
中
# react-native-config codegen
ios/tmp.xcconfig
- 应用刚刚创建的
config
文件,Debug
和Release
都要做同样的配置
- 创建
Run Script
添加如下代码:
"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"
- 修改应用名称
Android 图标配置
我们可以使用 图标工厂 来生成 android 图标。它会生成一个 android
文件夹,里面有不同的分辨率的图标文件夹,把里面的文件夹复制到android/app/src/main/res/
文件下,替换掉原先的文件。
此时注意要修改 AndroidManifest.xml 文件的 android:roundIcon="@mipmap/ic_launcher"
iOS 图标配置
继续使用 图标工厂 来生成 iOS
图标。它会生成一个 AppIcon.appiconset
文件夹,把这个文件夹替换掉 /iOS/你的项目/Images.xcassets/AppIcon.appiconset
。