最近想写一个react-native启动页网上最多的教程是使用react-native-splash-screen

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

而官方文档 过 于 不 详 细 于是今天踩坑后结合现有文档完善了下撸一份目前的可行方案

我的版本:

react-native	0.70.6
react-native-splash-screen	3.3.0

首先下载安装包： npm i react-native-splash-screen --save

官方分自动安装（按照官方教程我没成功） ，还有手动安装 ，我们这里采用手动安装

1. 在android/settings.gradle目录下，添加：

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2. 在android/app/build.gradle（路径不同于第一步）目录下中的 dependencies 对象，引入该安卓包：

...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}

3. 在android/app/src/main/java/com/xxxxx/MainActivity.java目录下，引入该安卓包：

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

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

这是别人给出的👆实际我的版本的rn可以自动导入的样子并不需要添加  SplashScreen.show(this);添加反而报错 于是我的是👇

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

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for
      // example:
      // packages.add(new Package());
      return packages;
    }

4. 在android/app/src/main/java/com/xxxxx/MainApplication.java 引入以下代码

 import org.devio.rn.splashscreen.SplashScreenReactPackage;

此时直接运行还是出现报错，继续接下来的步骤

5. 在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:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

6. 在android/app/src/main/res/values文件夹下创建color.xml

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

7. 在android/app/src/main/res下创建名为drawable-xhdpi文件(注意：这里可以创建drawable其他尺寸的文件 )，图片名称:launch_screen

8. 在App.js下添加以下代码：

import SplashScreen from 'react-native-splash-screen';

export default (): React.ReactElement => {
useEffect(() => {
      SplashScreen.hide();
  }, []);
  const topState = useBottomNavigationState();
...
}；

9. 重新编译运行 react-native run-android / yarn android

eg : 虽然是成功了不过还是有些不完美，还是有一点白屏的存在，这时我们打开

android/app/src/main/res/values/styles.xml文件,添加<item name="android:windowIsTranslucent">true</item>,如下 :

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