(Android) React-native-splash-screen Practice-solve the problem of starting white screen after react-native packaged well

1. Installation

NPM I react-native-splash-screen--save or

Yarn Add React-native-splash-screen--save

2. Automatic configuration

React-native link React-native-splash-screen or RNPM link react-native-splash-screen

or 3. Manually configure the 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

import org.devio.rn.splashscreen.SplashScreenReactPackage; //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   );}}; @Override public Reactnativehost Getreactnativehost () {return mreactnativehost;}}     

3.4 Mainactivity.java

import Android.os.Bundle; Public  Class Mainactivity extends Reactactivity {   @Override    void OnCreate (Bundle Savedinstancestate) {        splashscreen.show (this);  Here         super.oncreate (savedinstancestate);    }     ... other code}

3.5 in app/src/main/res/layout下Create 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 Add launch_screen.png image under app/src/main/res/drawable/3.7 set the transparent background android/app/src/main/res/values/styles.xml

<resources>    <!--Base Application Theme--    <style name= "Apptheme" parent= " Theme.AppCompat.Light.NoActionBar >        <!--Customize your Theme here--        <!--set Transparent background        -- <item name= "android:windowistranslucent" >true</item>    </style></resources>

3.8 react-native run-android failure prompt Tool:replace Allbackup

<manifest xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools"    package=" package name ">tools:replace=" Android:allowbackup " ... 

3.9 Android Flash back need to add 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. Usage

import splashscreen from ' React-native-splash-screen ' Export Default class Welcomepage extends Component {     componentdidmount () {        //do stuff while Splash scree n is shown        //after have done stuff (such as async tasks) hide the splash screen        splashscreen.hide ();     }}  

(Android) React-native-splash-screen Practice-solve the problem of starting white screen after react-native packaged well