一. 安装

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 为启动的图片名 )

<?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="@mipmap/launch_screen">
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?> <resources>
    <color name="primary_dark">#660B0B0B</color>
</resources>

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

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

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

image

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文件，添加两处代码

image

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

[SplashScreen show];  // 启动页面

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

image

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

image

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

image

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

image

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

image

四. 最后修改项目的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);
    }
}

作者：既然可以颠覆何必循规蹈矩
链接：https://www.jianshu.com/p/bf907cdbcfad
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

本文仅供方便自己学习所用，如有转载请注明本文的原作者与出处

最后编辑于：2018.12.26 16:56:02