android splash白屏_使用react-native-splash-screen解决应用启动白屏问题

2020-05-01

使用react-native-splash-screen库

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

react-native link react-native-splash-screenreact-native link react-native-splash-screen

修改MainActivity.java文件

android\app\src\main\java\com\wyzda\MainActivity.javaimport android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this);

super.onCreate(savedInstanceState);

}

完整代码package com.wyzda;

import com.facebook.react.ReactActivity;

import android.os.Bundle;

import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {

/**

* Returns the name of the main component registered from JavaScript. This is used to schedule

* rendering of the component.

*/

@Override

protected String getMainComponentName() {

return "wyzda";

}

@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this);

super.onCreate(savedInstanceState);

}

}

在app/src/main/res/layout目录下创建launch_screen.xml文件，目录不存在则手动创建！<?xml version="1.0" encoding="utf-8"?>

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

把你的启动图重命名为launch_screen.png并放到android\app\src\main\res\mipmap-hdpi

请参考安卓启动图片存放位置！

新建文件：android\app\src\main\res\values\colors.xml 目录不存在则手动创建<?xml version="1.0" encoding="utf-8"?>

#000000

修改 android\app\src\main\res\values\styles.xml 文件

#000000

true

在你的应用首页使用，下面是3秒后关闭启动图的使用方法。

引用库import SplashScreen from 'react-native-splash-screen';

在组件加载后3秒后隐藏componentDidMount() {

setTimeout(() => {

SplashScreen.hide();

},3000);

}