react-native 启动屏及App图标设置

简介

上一章主要讲述了react-native的环境搭建，这一章主要讲述如何配置App的启动屏和图标。

启动屏配置

npm i react-native-splash-screen --save

获取图标

1.进入https://icon.wuruihong.com/#图标工厂，让ui切一张1024x1024的图标图片

IOS端

1.打开AppDelegate.m文件，根据下面代码配置

#import "AppDelegate.h"
 
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // 添加此行
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // 添加此行
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}
 
@end

2.在项目根目录下执行命令行cd ios && pod install

3.将解压后的图标文件夹ios文件打开，复制粘贴，替换项目所在文件的ios/xxxx(项目名)/Images.xcassets下的图标文件

LaunchScreen.storyboard

1.使用xcode打开项目,点击项目下的LaunchScreen.storyboard,删除所有label元素,点击xcode右上角 + 号,搜索image添加Image View

2.将Image View长宽拉伸至整个屏幕，设置右下角的constraints上下左右为10,设置content mode为 Aspect fill

3.编辑Image View的constraints全部为0,编辑如下图所示的Horizontal和Vertical

4.点击左边文件夹Images.xcassets,点击 xcode下面 + 号, 添加New Image Set,将启动图片放至新建的image中，点击LaunchScreen.storyboard中Image View，设置图片为新建的image

设置图片

Android端

1.在android/settings.gradle 文件中加入以下代码:

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2.在android/app/build.gradle 文件中加入以下代码:

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

3.打开 MainApplication.java文件进行配置:

...
import org.devio.rn.splashscreen.SplashScreen;

protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);  // 启动屏展示,添加此行代码
    super.onCreate(null);
}

4.创建文件夹及文件，按照下图配置

替换图标

1.将解压后的图标文件夹android文件打开，复制粘贴，替换项目所在文件的android/app/src/main//res下的图标文件
2.splash_img.png为背景图片,目前为750x1334，可自适应拉伸

添加或修改下列文件

/res/drawable/background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/white"/>
    <item
        android:width="100dp"
        android:height="100dp"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />
</layer-list>

/res/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="@color/white"
    android:gravity="center">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash_img"
        android:scaleType="fitXY"
    />
</LinearLayout>

/res/AndroidManifest.xml

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher" // 修改此行
      android:allowBackup="false"
      android:theme="@style/AppTheme">

/res/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="font1">#475669</color>
    <color name="primary_dark">#4F6D7A</color>
</resources>

/res/values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:statusBarColor">@color/white</item>
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/white</item>
    </style>
</resources>