1. ICON
选择项目图标, 上传至 图标工厂 生成对应图标
第一步:
第二步:下载解压
替换 ios/我的项目名称/Images.xcassets/AppIcon.appiconset
下的图标
- android/app/src/main/res 下对应的图标
- 与 UI 找到对应图标的 圆角图标, 替换 android/app/src/main/res 下的
ic_launcher_round
图标。 - 如果项目没有圆角图标, 也可以不做第二步, 直接找到
android/app/src/main/AndroidManifest.xml
文件进行修改
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:usesCleartextTraffic="true"
android:icon="@mipmap/ic_launcher"
- android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
....
</application>
2. APP名称
应用程序名称默认是使用 react-native-cli
创建项目的名称, 也就是项目名称。
配置文件: android/app/src/main/res/values/strings.xml
<resources>
- <string name="app_name">project_rn</string>
+ <string name="app_name">我的项目名称</string>
</resources>
以项目名称为 project_rn
举例
配置文件: ios/[project_rn]/Info.plist
<key>CFBundleDisplayName</key>
- <string>project_rn</string>
+ <string>我的项目名称</string>
3. 启动屏
使用第三方库: react-native-splash-screen
yarn add react-native-splash-screen
npm i react-native-splash-screen --save
在项目首页react-native-splash-screen
, 当程序加载完毕隐藏启动屏
import SplashScreen from 'react-native-splash-screen';
SplashScreen.hide();
// setTimeout(()=>{SplashScreen.hide()}, 3000, )
Android
- 修改
MainActivity.java
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // here
super.onCreate(savedInstanceState);
}
// ...other code
}
- 添加启动屏图片
在 android/app/src/mian/res/drawable-*
目录下添加对应的启动屏图片, 启动屏图片命名为launch_screen.png
。
对应的尺寸推荐
MDPI is 320x480 dp = 320x480px (1x)
LDPI is 0.75 x MDPI = 240x360px
HDPI is 1.5 x MDPI = 480x720px
XHDPI is 2 x MDPI = 640x960px
XXHDPI is 3 x MDPI = 960x1440px
XXXHDPI is 4 x MDPI = 1280x1920px
- 创建
layout
文件夹
在 android/app/src/mian/res
目录下创建layout
文件夹,并在创建的layout
文件夹中创建launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen">
</LinearLayout>
- 优化
这样设置也会存在一瞬间的白屏, 所以需要优化处理
android/app/src/main/res/values/styles.xml
中添加 <item name="android:windowIsTranslucent">true</item>
设置透明背景
IOS
iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x
iPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2x
iPhone Portrait iOS 7,8-2x (640×960) @2x
iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x
iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x
Bug处理:
launch_screen.png: AAPT: error: file failed to compile.
这是由于图片名称为launch_screen.png
, 我本人是从 jpg
转后缀名为png
.所以报错。 让UI直接给png
格式就可以。