如何在 React Native For Android 中在启动画面后删除白屏 [英] How to Remove White Screen after Splash Screen in React Native For Android

问题描述

我从这个 turorial 安装了一个默认的 React Native 项目a> 并且我使用 本教程.但是，现在我得到:

I have a default react native project I installed from this turorial and I added a splash screen to my Project with this tutorial. However, now I get:

• 一张 0.5 秒的闪屏照片
• 然后 1.5 秒白屏
• 在那之后，我的应用程序启动了，

解决此问题的最佳和最标准的方法是什么?我需要 1 秒的启动画面，然后我的应用程序应该启动，我已经阅读了更多文章，但我找不到 React Native 的修复方法.

What is the best and most standard way to fix this problem? I need my splash screen for 1 secend and after that my app should start, I have read more articles but I couldn't find a fix for react native.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".SplashActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name=".MainActivity" />
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

推荐答案

第一:
运行 npm i react-native-splash-screen --save

第二步(插件安装):
自动安装

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

手动安装
安卓:
1:在您的 android/settings.gradle 文件中，添加以下内容:

Manual installation
Android:
1: In your android/settings.gradle file, make the following additions:

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2:在您的 android/app/build.gradle 文件中，添加 :react-native-splash-screen 项目作为编译时依赖项:

2: In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

3:通过以下更改更新 MainApplication.java 文件以使用 react-native-splash-screen:

3: Update the MainApplication.java file to use react-native-splash-screen via the following changes:

// 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;
    }
}

示例代码:

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

export default class example extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }


    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={(e)=> {
                    Linking.openURL('http://www.devio.org/');
                }}
            >
                <View >
                    <Text style={styles.item}>
                        SplashScreen 启动屏
                    </Text>
                    <Text style={styles.item}>
                        @：http://www.devio.org/
                    </Text>
                    <Text style={styles.item}>
                        GitHub:https://github.com/crazycodeboy
                    </Text>
                    <Text style={styles.item}>
                        Email:[e-mail]
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f2f2',
        marginTop: 30
    },
    item: {
        fontSize: 20,
    },
    line: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'darkgray',
    },
})

这篇关于如何在 React Native For Android 中在启动画面后删除白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！