react-native-splash-screen(启动页)

react-native-splash-screen(启动页)

1. 安装

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

2. 添加代码

在MainActivity中添加一下代码

import android.os.Bundle;  //add
import org.devio.rn.splashscreen.SplashScreen; //add

public class MainActivity extends ReactActivity {

   ···

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); // add
        super.onCreate(savedInstanceState);
    }
}

3. 使用

1. 在android/app/src/main/res目录下创建layout文件夹，并在创建的layout文件夹中创建launch_screen.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/splashscreen"
            android:scaleType="centerCrop"/>

</LinearLayout>

2.在res文件夹下创建drawable文件夹，并添加一个名为splashscreen的图片文件

3. 添加一个名为primary_dark的app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

4. 解决白屏的问题

在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>

5. 在React-Native的主界面添加如下代码

import React, {Component} from 'react';
import RootScene from "./src/RootScene";
import SplashScreen from 'react-native-splash-screen';

type Props = {};
export default class App extends Component<Props> {

    render() {
        return (
            <RootScene/>
        );
    }

    componentDidMount(): void {
        this.timer = setTimeout(() => {
            // 隐藏启动页
            SplashScreen.hide();
        }, 2000);
    }

    componentWillUnmount(): void {
        this.timer && clearTimeout(this.timer);
    }

}

界面的效果图

SplashScreen.gif