本文共 1882 字,大约阅读时间需要 6 分钟。
基于解决 Native项目启动时白屏问题
http://blog.csdn.net/chichengjunma/article/details/52860152
一、下载 react-native-splash-screen
在项目根目录打开终端运行
- 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.文件,如下:
- 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 文件如下:
- public class MainActivity extends ReactActivity {
- @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>
3.在.js文件的启动页中
- import SplashScreen from 'react-native-splash-screen'
然后在componentDidMount中调用Splash.hide().