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

白日放歌须纵酒，青春作伴好还乡。这篇文章主要讲述(Android)react-native-splash-screen实践-解决react-native打包好后启动白屏的问题相关的知识，希望能为你提供帮助。
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>

【(Android)react-native-splash-screen实践-解决react-native打包好后启动白屏的问题】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(); } }