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 getPackages() {
            return Arrays.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 文件

 

需要的启动图文件夹，添加到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 透明

    
    


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


 
 #000

7.在需要的页面引入

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