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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.