react-native app 的启动页的制作方法

第一步：安装依赖： npm install react-native-splash-screen --save

第二步：然后执行命令： react-native link

第三步：修改android\app\src\main\java\com\xx\MainActivity.java中的内容为：

import android.os.Bundle; // 添加这一行
import org.devio.rn.splashscreen.SplashScreen;  // 添加这一行
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "StoreManager";
    }

	 // 添加这一个方法
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
}

第四步：新建android\app\src\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>

第五步：在目录 android\app\src\main\res\ 下新建 drawable-hdpi和drawable-ldpi和drawable-mdpi和drawable-xhdpi 和 drawable-xxhdpi和drawable-xxxhdpi 文件夹,把启动页图片放进去，都命名为launch_screen.png

第六步：将 AndroidManifest.xml 文件中的 application 标签中的 android:allowBackup 属性设置为 true。

第七步：在目录 android\app\src\main\res\values 下新建 colors.xml 文件，添加以下内容：

<resources>
    <color name="primary_dark">#660B0B0B</color>
</resources>

第八步：在App.js加载完成后隐藏启动页

import SplashScreen from 'react-native-splash-screen';
componentDidMount() {
   // 在加载完成后隐藏启动页
   SplashScreen.hide();
}

在启动过程中还可能会出现 IO 错误，多试几次就行了。

可参考 https://github.com/crazycodeboy/react-native-splash-screen