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