RN 添加启动页（安卓）

可能自动安装会出现各种问题，这里推荐手动安装，可以比较清晰的知道是哪出了问题

1.安装
yarn add react-native-splash-screen
不建议使用link 命令，最好手动配置一下

2.Android手动配置:
（1）在android/settings.gradle文件中添加如下代码：
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

（2） 在android/app/build.gradle文件中,dependencies对象内添加如下代码：
dependencies {
...
implementation project(':react-native-splash-screen')
...
}

（3）在MainActivity.java文件中添加如下代码：
（可以不配置 MainApplication.java文件）
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // 启动页设置添加代码

public class MainActivity extends ReactActivity {
/**

• 设置启动页
  */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this); // 展示启动页设置代码
  super.onCreate(savedInstanceState);
  }
  // ...other code
  }

（4）添加启动页图片及布局
在路径app/src/main/res/layout创建文件(如果不存在则进行手动创建)命名为 launch_screen.xml. 然后输入下面内容：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/start"
android:scaleType="centerCrop"
/>
</RelativeLayout>
（5）在res文件夹下面创建如下文件夹，添加对应分辨率图片，分别对应放入下面文件夹,图片命名和xml中一致，命名为start （命名可以随机，保持一致就可以）
mipmap-ldpi
mipmap-mdpi
mipmap-hdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi
(6)在文件夹新建一个xml文件，app/src/main/res/values/colors.xml代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
(7)将启动背景设置成透明背景，使用下面方式进行处理， 打开android/app/src/main/res/values/styles.xml文件，并且添加 <item name="android:windowIsTranslucent">true</item>
到文件中，添加之后结果如下所示:
<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


<item name="android:windowIsTranslucent">true</item>
</style>
</resources>

现在，我们所有的准备工作都已经完成，下面就是在js代码中的使用，在React-Native代码中进行隐藏启动页，
当我们准备好js代码之后，我们就可以将我们的启动页进行隐藏掉，其中隐藏启动页的代码如下：
import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import Router from './src/routerManager';

export default class App extends Component {
componentDidMount(){
// 在入口文件处隐藏掉启动页
SplashScreen.hide(); // 关闭启动屏幕
}
render() {
return (
<Router {...this.props} />
);
}
}