(Android)react-native-splash-screen實踐-解決react-native打包好後啟動白屏的問題

標籤：main   def   dir   com   分享圖片   技術分享   custom   resource   cti   

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();    }}

 

(Android)react-native-splash-screen實踐-解決react-native打包好後啟動白屏的問題