用于解决iOS和Android启动白屏问题及简单的启动页面展示,容易上手 github

一.自动下载安装

在项目根目录下运行npm i react-native-splash-screen --save后执行react-native link react-native-splash-screen;
若有安装yarn则在项目根目录下执行yarn add react-native-splash-screen即可

二.配置iOS

在AppDelegate.m文件中加入如下代码

#import "AppDelegate.h"
...
#import "SplashScreen.h"     //add① 引入头文件
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
..
  [SplashScreen show];   //add② 启动后进入启动页
  return YES;
}

@end

设置启动图片来源

General设置

在LaunchImage处添加对应的启动图片(对应各种尺寸)

Image设置

再运行iOS项目启动页就会出现的,关闭启动页请看(四)

三.配置android

安卓的配置稍微复杂点
在MainActivity.java文件下添加以下代码

...
import android.os.Bundle;  //add 
import org.devio.rn.splashscreen.SplashScreen; //add
...
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对应的地址一致),然后放入对应分辨率下的图片

放入图片.png

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#656460  //此处填入自己需要设置的颜色</color>
</resources>

以上运行后即可展示出启动页面,但仍有白屏闪过
在android/app/src/main/res/values/styles.xml加入代码

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:windowIsTranslucent">true</item> //add 用于设置透明白背景
        ...
    </style>

</resources>

四.配置ReactNative

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

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

至此简单的启动页就完成了~