(Android)react-native-splash-screen实践-解决react-native打包好后启动白屏的问题

Posted 2020-11-02 cosyer的博客

1.安装

npm i react-native-splash-screen --save or

yarn add react-native-splash-screen --save

2.自动配置

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

or 3.手动配置

3.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\')

3.2  android/app/build.gradle 

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

3.3 MainApplication.java

// react-native-splash-screen >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1 
// import com.cboy.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()  //here 
            );
        }
    };
 
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

3.4 MainActivity.java

import android.os.Bundle; // here 
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreen; // here 
// react-native-splash-screen < 0.3.1 
// import com.cboy.rn.splashscreen.SplashScreen; // here 
 
public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here 
        super.onCreate(savedInstanceState);
    }
    // ...other code 
}

3.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>

3.6 在app/src/main/res/drawable/ 下加入launch_screen.png图片

3.7 设置透明背景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>

3.8 react-native run-android失败 提示tool:replace allbackup

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="包名">

application节点添加
<application tools:replace="android:allowBackup" ...

3.9 android 闪退 需要添加android/app/src/main/res/values/colors.xml

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

https://github.com/crazycodeboy/react-native-splash-screen/issues/149

4.用法

import SplashScreen from \'react-native-splash-screen\'
 
export default class WelcomePage extends Component {
 
    componentDidMount() {
        // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}