React Native启动白屏问题

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

http://blog.csdn.net/chichengjunma/article/details/52860152

一、下载 react-native-splash-screen

在项目根目录打开终端运行

[html] view plain copy

1. npm react-native-splash-screen --save  

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

自动安装终端运行：

[html] view plain copy

1. react-native link react-native-splash-screen  

或

[html] view plain copy

1. rnpm link react-native-splash-screen  

手动安装

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

[java] view plain copy

1. include ':react-native-splash-screen'     
2. 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：

代码如下：

[java] view plain copy

1. ...  
2. dependencies {  
3.     ...  
4.     compile project(':react-native-splash-screen')  
5. }  

3.更新你的MainApplication.Java文件，如下:

[java] view plain copy

1. public class MainApplication extends Application implements ReactApplication {  
2.   
3.     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {  
4.         @Override  
5.         protected boolean getUseDeveloperSupport() {  
6.             return BuildConfig.DEBUG;  
7.         }  
8.   
9.         @Override  
10.         protected List<ReactPackage> getPackages() {  
11.             return Arrays.<ReactPackage>asList(  
12.                     new MainReactPackage(),  
13.             new SplashScreenReactPackage()  //添加这一句  
14.             );  
15.         }  
16.     };  
17.   
18.     @Override  
19.     public ReactNativeHost getReactNativeHost() {  
20.         return mReactNativeHost;  
21.     }  
22. }  

三、配置

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

[java] view plain copy

1. public class MainActivity extends ReactActivity {  
2.    @Override  
3.     protected void onCreate(Bundle savedInstanceState) {  
4.         SplashScreen.show(this);  // 添加这一句  
5.         super.onCreate(savedInstanceState);  
6.     }  
7.     // ...other code  
8. }  

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

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@drawable/launch_screen">  
6. </LinearLayout>  

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

[html] view plain copy

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

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