React native 实战 -- 启动图（android）实

安装

• RN版本 0.49
• 安装npm i react-native-splash-screen --save
• 执行react-native 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 文件是否多出一行，否则手动加上

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

3. 更新 MainApplication.java 文件

import org.devio.rn.splashscreen.SplashScreenReactPackage;

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()  //这行没有就加上
            );
        }
    };
  ···
}

4.更新 MainActivity.java 文件

import android.os.Bundle; // 添加这一行
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // 添加这一行（这里导入的跟MainApplication.java 文件导入的不一样哦）
 
public class MainActivity extends ReactActivity {
   //这个方法没有就全部加上
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 添加这一行
        super.onCreate(savedInstanceState);
    }
     ...
}

5. 添加 app/src/main/res/layout/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>
需要的启动图文件夹，添加到app/src/main/res/ 这个下面，文件夹里的文件命名跟上面一样（launch_screen）
drawable-ldpi  
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

6.设置android/app/src/main/res/values/styles.xml 透明

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

对高版本android 兼容
需要在 android/app/src/main/res/values/colors.xml 额外添加一个文件

<?xml version="1.0" encoding="utf-8"?>
<resources> 
 <color name="primary_dark">#000</color>
</resources>

7.在需要的页面引入

import SplashScreen from 'react-native-splash-screen'
 
export default class WelcomePage extends Component {
 
    componentDidMount() {
        //关闭启动图
        SplashScreen.hide();
    }
}