ReactNative启动白屏解决

本文主要设置andriod的启动屏，ios的感觉不需要这个插件..

下载依赖插件

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

npm react-native-splash-screen --save

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

自动安装终端运行：（推荐）

react-native link react-native-splash-screen  
或
rnpm link react-native-splash-screen

手动安装

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 文件中添加 :react-native-splash-screen：
...  
dependencies {  
        ...  
    compile project(':react-native-splash-screen')  
}

3.更新你的MainApplication.Java文件，如下:
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;  
}  
}

配置

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

import android.os.Bundle; //需要新添加的？
import com.facebook.react.ReactActivity; //原来有的
import com.cboy.rn.splashscreen.SplashScreen; //需要新添加的？

public class MainActivity extends ReactActivity {  
    //原来有的
    @Override
    protected String getMainComponentName() {
        return "examples";
    }
    //下面是新添加的
       @Override  
        protected void onCreate(Bundle savedInstanceState) {  
               SplashScreen.show(this);    
            super.onCreate(savedInstanceState);  
        }  
    }
}

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

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

创建的文件夹和文件路径如下：
splash.png就是你想要设置的启动图图片，

3.在.js文件中使用

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

//然后在componentDidMount中调用Splash.hide().
export default class WelcomePage extends Component {
    componentDidMount() {
        SplashScreen.hide();
    }
}

参考网址：https://github.com/crazycodeboy/react-native-splash-screen

OVER

2016-12-10