废话不多，直接上步骤

一. 安装

yarn add react-native-splash-screen

link 二选一

react-native link // link之所有的第三方库

react-native link react-native-splash-screen // 或者link这个库

二.android 配置

在android/app/src/main/res目录中,新建layout目录,在此目录下,创建launch_screen.xml文件,复制以下内容( 其中 launch_screen 为启动的图片名 )

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@mipmap/launch_screen">

在android/app/src/main/res/values目录中,新建colors.xml 文件,复制以下内容(其中颜色可以自己定义，带透明度的)

#660B0B0B

在android/app/src/main/res/values目录中,修改styles.xml 文件

true

4 在android/app/src/main/java/com/newredsj/MainActivity.java 文件中添加如图所示的代码

B0E435EA-E980-4FC1-AB57-FE9B119B3C04.png

import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;

@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this);

super.onCreate(savedInstanceState);

}

三. iOS 配置

1、打开ios目录下的AppDelegate.m文件，添加两处代码

ios1.png

#import "SplashScreen.h" // 启动页面

[SplashScreen show]; // 启动页面

2、打开ios目录下的Image.xcassets文件，在空白处右键选择 App Icons & Launch Images ➜ New ios Launch Image , 完成这步后会生成一个LaunchImage

ios2.png

3、选中Image.xcassets ➜ LaunchImage，就是上一步创建的LaunchImage，上传相应分辨率的图片作为启动屏幕(这里的分辨率一定要对，一般来说@2x 和@3x分辨率的图就可以了)如图

ios3.png

4、选中LaunchScreen.xib,选择默认下一步，然后把右边的 Use as Launch Screen 取消选中(因为ios可以用来自图片启动屏幕或通过 LaunchScreen.xib画启动屏幕，默认是画了一个，因为我们用的是图片所以要取消它)。记住要先选中中间的那个图 右边的卡片才会出现我们想要的

ios4.png

5、选中项目工程，选中General 设置Launch Images Srouce配置为LaunchImage(前提是你第三步已经上传了头片，否则如果没有LaunchImage，会弹出一个框提示拷贝图片，按照默认点确定就行)，然后设置Launch Screen File为空(必须)。

ios5.png

正常流程到这里已经完成了，因为一些基本的，自动安装link会帮我们配置好，但是最好了 还是检测一下下图的几个地方是否正确配置

ios6.png

ios7.png

ios8.png

四. 最后修改项目的js文件,就是让

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

componentDidMount() {

// do anything while splash screen keeps, use await to wait for an async task.

SplashScreen.hide();

// 这里我用的是react-navigation的重置路由，让项目一进来的时候加载WelcomePage页面，再这个里面先隐藏启动页，然后跳转到登录页面

const { dispatch }=this.props.navigation

const resetGuide = NavigationActions.reset({

index: 0,

actions: [

NavigationActions.navigate({ routeName: 'Login'})

]

})

this.timer=setTimeout(() => {

SplashScreen.hide();

dispatch(resetGuide)

}, 1000);

}

}

OK，完结

之前我也文章也是可以任意转载的，但是有些人原封不动copy过去，也不说明是转载的，所以以后我的文章未经本人同意禁止转载，谢谢！