react-native 启动页空白

react-native 启动页空白

开发react native 应用，启动app时，会有明显的空白期，带来不好的体验。

1. 安装 react-native-splash-screen

npm i react-native-splash-screen --save // 下载依赖

npx react-native link react-native-splash-screen

执行完第二条指令后，会自动在 android/settings.gradle 文件上自动生成下述语句,

将 …\node_modules\rn-splash-screen\android 单斜线改为双斜线表示

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

2. android 进行相关配置

在 android/app/src/main/java/com/xxx/MainActivity.java 文件中添加所示的代码

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


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

3. 新建目录存放启动页图片 及 配置

1. android/app/src/main/res 目录中,新建 layout 目录,在layout目录下,创建 launch_screen.xml 文件,复制以下内容（ 其中 launch_screen 为启动的图片名 )

    <?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>

2. android/app/src/main/res 目录中,新建 drawable 目录，放入启动页图片，命名为 launch_screen.png

3. 在 react native项目的主入口文件，也就是App.js文件中添加相关代码

    import SplashScreen from 'react-native-splash-screen';
    class App extends Component {
        constructor(props) {
            super(props)
        }
        componentDidMount() {
            setTimeout(() => {
                SplashScreen.hide(); //关闭启动页屏幕
            }, 2000);
        }
        render() {
            return (
              <View>
                <Text>Welcome to React Native!</Text>
              </View>
            );
         }
     }