发现好多人的react-native-splash-screen有些问题，今天总结写下，供大家参考！

1.项目根目录下执行

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

2.项目根目录下执行

react-native link react-native-splash-screen

3.确保android/settings.gradle里有(link后已自动添加)

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

4.确保android/app/build.gradle里有(llink后已自动添加)

dependencies {
    ...
    compile project(':react-native-splash-screen') //here
}

5.确保android/app/src/main/java/com/xxxxx/MainApplication.java里有(link后已自动添加)

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

...
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

 ...
}

6.确保android/app/src/main/java/com/xxxxx/MainActivity.java里有

import android.os.Bundle; // here
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
...
//添加以下全部代码
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  
        super.onCreate(savedInstanceState);
    }
//添加结束
...
}

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

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

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

9.在android/app/src/main/res下创建 drawable-xhdpi和drawable-xxhdpi 文件夹，分类在两个文件夹内添加启动页图片，图片名称:launch_screen

10.重新安装app会出现以下错误：

image.png

方法如下：将箭头出的false改为true

image.png

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

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

export default class WelcomePage extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }
}

ios配置：执行react-native link react-native-splash-screen后，已自动配置完成。

1.启动屏设置：

image.png

2.按不同尺寸将启动图添加进去（切记！切记！尺寸一定要对，否则会报错！！！）：

image.png

尺寸如下：

image.png image.png

3.如图所示进行以下配置：

image.png

配置完成！！！

效果图：

image.png

如需要开启页延时消失，加延时器即可(模拟器需重新安装下app,command+R和reload是不行的)

  
   constructor(props){
        super(props);
        this.state={
        };

        this.delayed=this.delayed.bind(this) //添加此代码
    }   

    //添加此代码
    delayed(){
        SplashScreen.hide();
    }

    componentDidMount(){
        setTimeout(()=>{this.delayed()}, 3000) //添加此代码
    }

亲测没有问题，觉得有用的小伙伴点个小红心就行😄，么么哒。

友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！