react-native 启动页

​ 使用 react-native 开发的应用，启动 APP 会有蛮长一段的白屏直到内容加载完毕。通过使用 react-native-splash-screen 来实现启动页。

安装 react-native-splash-screen

npm i react-native-splash-screen --save // 下载依赖

npx react-native link react-native-splash-screen // 自动安装

添加代码

1. android\app\src\main\java\com\项目名\MainActivity.java 中添加如下代码：

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

public void onCreate(@Nullable Bundle savedInstanceState) {
	 +// 启动页
     +SplashScreen.show(this, true);
}

2. android\app\main\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="@drawable/launch_screen">
</LinearLayout>

3. android\app\main\res\drawable 文件夹下添加一张名为 launch_screen 的启动图片。

4. 在 App.js 中， 等界面都加载完成之后关闭启动页。代码如下：

componentDidMount() {
	SplashScreen.hide();
}

这样就完成了。