基于Android解决React Native项目启动时白屏问题@H_403_3@

@H_403_3@

一、下载 react-native-splash-screen@H_403_3@ 在项目根目录打开终端运行

npm react-native-splash-screen --save

二、安装(自动安装或手动安装)@H_403_3@

自动安装终端运行：@H_403_3@

react-native link react-native-splash-screen

rnpm link react-native-splash-screen

手动安装@H_403_3@

1.在你的android/settings.gradle 文件中添加下列代码:@H_403_3@

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 文件中添加:react-native-splash-screen：@H_403_3@

代码如下：@H_403_3@

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

3.更新你的MainApplication.java文件，如下:@H_403_3@

public class MainApplication extends Application implements ReactApplication {

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

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),new SplashScreenReactPackage()  //添加这一句
            );
        }
    };

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

@H_403_3@

三、配置@H_403_3@

1.更新你的MainActivity.java 文件如下：@H_403_3@

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 添加这一句
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

2.创建一个名为launch_screen.xml 的布局文件来自定义你的启动屏幕。@H_403_3@

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

3.在.js文件的启动页中@H_403_3@

import SplashScreen from 'react-native-splash-screen'

然后在componentDidMount中调用Splash.hide().@H_403_3@