react-native 安卓设置启动屏

添加启动页可以使用react-native-splash-screen库，通过它可以控制启动页的显示和隐藏。

安装

// react-native 6.0以上版本不用手动link
yarn add react-native-splash-screen

安卓配置

在MainActivity.java文件下添加以下代码：

...
import android.os.Bundle; 
import org.devio.rn.splashscreen.SplashScreen;
...
public class MainActivity extends ReactActivity {
...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);   //add
        super.onCreate(savedInstanceState);
    }
}

然后在android/app/src/main/res/layout文件夹下创建启动页的XML文件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="@mipmap/launch_screen"> //该路径为后面设置的启动图片位置
</LinearLayout>

接着在android/app/src/main/res文件夹下创建mipmap文件夹(与上面background对应的地址一致),然后放入对应分辨率下的图片。
为防止白屏，还应做如下操作：
在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:textColor">#000000</item>
        <item name="android:windowIsTranslucent">true</item> // 用于设置透明白背景
    </style>

</resources>

react-native 配置

在需要关闭启动页的js文件中引入import SplashScreen from ‘react-native-splash-screen’，然后在关闭处添加代码SplashScreen.hide

componentDidMount(){
     ...
     //2秒后关闭启动页
     setTimeout(()=>{SplashScreen.hide()}, 2000, )
};

---

启动页就算完成了~