React Native 设置APP图标, ICON, 启动屏

2,080 阅读2分钟

1. ICON

选择项目图标, 上传至 图标工厂 生成对应图标

第一步:

第二步:下载解压

替换 ios/我的项目名称/Images.xcassets/AppIcon.appiconset 下的图标

  1. android/app/src/main/res 下对应的图标
  2. 与 UI 找到对应图标的 圆角图标, 替换 android/app/src/main/res 下的 ic_launcher_round 图标。
  3. 如果项目没有圆角图标, 也可以不做第二步, 直接找到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

  1. 修改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
}

  1. 添加启动屏图片

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
  1. 创建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>
  1. 优化

这样设置也会存在一瞬间的白屏, 所以需要优化处理

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处理:

  1. launch_screen.png: AAPT: error: file failed to compile.

这是由于图片名称为launch_screen.png, 我本人是从 jpg转后缀名为png.所以报错。 让UI直接给png格式就可以。