用于解决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
由于框架内部会使用
primary_dark字段作为参数,故要在android/app/src/main/res/values创建colors.xml文件,并写入代码
<?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, )
};
至此简单的启动页就完成了~
