react-native-splash-screen 给安卓项目添加启动图

react-native-splash-screen 给安卓项目添加启动图

react-native-splash-screen 基本配置

• 安装插件：npm install react-native-splash-screen --save
• 关联项目：react-native link react-native-splash-screen or rnpm link react-native-splash-screen

link 之后，安卓项目中会自动添加头文件 以及部分代码，为保证项目顺利运行，还请确认下面代码是否已经完善。

• 确保 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')

* android/app/build.gradle 文件中 添加依赖 `react-native-splash-screen`

    ```
...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

• 更新 MainApplication.java 文件

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

准备添加代码和文件配置

• app/src/main/res/layout 文件夹下 添加 launch_screen.xml 并copy如下代码：

• 创建文件夹 drawable-xhdpi、 drawable-xxhdpi（暂时先创建这两个就够了），将准备好的启动图 命名为 launch_screen.png 分别放入创建好的文件夹

• 白屏问题，设置透明背景：android/app/src/main/res/values/styles.xml 文件夹下 添加 true

* `android/app/src/main/res/values/colors.xml` 文件夹下，添加如下：

    ```
  #660B0B0B 

• 适当的时刻 隐藏启动图 可以是在视图挂载完毕，可以是网络请求结束之后

import SplashScreen from 'react-native-splash-screen'
componentDidMount() {
    SplashScreen.hide();
  }