初试React-Native启动屏

版本信息：

"react-native": "0.57.4",
"react-native-splash-screen": "^3.1.1",

自己刚入门React-Native，自己在测试的时候，发现第一次打开App会有短暂的白屏，于是找到了react-native-splash-screen这个库，此次主要记录解决过程

安装 react-native-splash-screen

yarn add react-native-splash-screen

查看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')

如果没有，请手动Link，react-native link react-native-splash-screen

在android/app/build.gradle文件中添加以下代码(会报错，暂未解决)

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

打开Project\android\app\src\main\java\com\project\MainApplication.java添加

// react-native-splash-screen >= 0.3.1 如果版本大于0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1  如果版本小于0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;


    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
            new SplashScreenReactPackage(),
            new VectorIconsPackage() // 这里我的文件是自动添加的，所以如果没有则添加
      );
    }

打开 MainActivity.java文件

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 如果要全屏显示，SplashScreen.show(this, true);
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

在这个目录(没有layout则新建)app/src/main/res/layout下创建launch_screen.xml，写入

  // 与layout文件夹同级，新建drawable文件夹，放入名为launch_screen的png文件

新建color.xml在app/src/main/res/values/目录，写入

    #fff

如果需要设置透明背景，在android/app/src/main/res/values/styles.xml文件中添加以下item

如果需要自定义状态栏颜色,在android/app/src/main/res/values/colors.xml添加

    #fff

在android/app/src/main/res/values/styles.xml文件中引用

在MainActivity.java文件中修改show方法

SplashScreen.show(this, R.style.SplashScreenTheme);

IOS暂未配置。。。gitHub地址