React-Native Android/IOS 图标以及其它相关配置

1,339 阅读1分钟

mikita-yo-GVOJ2B-ktII-unsplash.jpg

图片来源 unsplash.com/photos/GVOJ…

在介绍 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"

截屏2021-10-24 下午12.49.53.png

iOS

cd ios && pod install && cd ..

添加 .env 文件

  • .env

截屏2021-10-24 下午1.50.13.png

  • .env.production
API_URL=https://production.com/

使用变量

截屏2021-10-24 下午1.50.13.png

截屏2021-10-24 下午1.54.17.png

切换不同的环境

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

截屏2021-10-24 下午2.09.08.png

截屏2021-10-24 下午2.13.16.png

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')

截屏2021-10-24 下午4.48.50.png

android/app/src/main/res/values/strings.xml 应用名称

<resources>
    <string name="app_name">@string/APP_NAME</string>
</resources>

截屏2021-10-24 下午4.52.33.png

截屏2021-10-24 下午4.55.31.png

Android 9.0 以上系统不允许 Http 协议

这里说一下和 react-native-config 无关的。以前我在做 React-Native APP 的时候用到微信头像,当时微信头像的图片地址是 http 协议,在开发环境是没有问题,但是在生产环境就有问题,究其原因是 Android 9.0 以上系统不允许 Http 协议,但我们可以通过配置来解决这个问题。

  1. 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>

截屏2021-10-24 下午5.09.24.png

  1. android/app/src/main/AndroidManifest.xml 添加下面代码
 android:networkSecurityConfig="@xml/network_security_config"

截屏2021-10-24 下午5.14.37.png

iOS

  1. 创建一个 Config.xcconfig 文件,并添加如下代码:
#include? "tmp.xcconfig"

截屏2021-10-24 下午6.09.38.png

  1. 将以下内容添加到.gitignore
# react-native-config codegen
ios/tmp.xcconfig

  1. 应用刚刚创建的 config 文件,DebugRelease 都要做同样的配置

截屏2021-10-24 下午6.14.39.png

  1. 创建 Run Script

添加如下代码:

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

截屏2021-10-24 下午6.23.18.png

  1. 修改应用名称 截屏2021-10-24 下午6.25.16.png

截屏2021-10-24 下午6.40.22.png

Android 图标配置

我们可以使用 图标工厂 来生成 android 图标。它会生成一个 android 文件夹,里面有不同的分辨率的图标文件夹,把里面的文件夹复制到android/app/src/main/res/文件下,替换掉原先的文件。

此时注意要修改 AndroidManifest.xml 文件的 android:roundIcon="@mipmap/ic_launcher"

截屏2021-10-24 下午7.44.40.png

截屏2021-10-24 下午7.46.59.png

iOS 图标配置

继续使用 图标工厂 来生成 iOS 图标。它会生成一个 AppIcon.appiconset 文件夹,把这个文件夹替换掉 /iOS/你的项目/Images.xcassets/AppIcon.appiconset

截屏2021-10-24 下午7.09.54.png