如何在React Native for Android中的启动画面后删除白色屏幕

I have a Default react native project and I installed From This Turorial and I just added Splash Screen to my Project with This Tutorial, But I Got First:

我有一个Default react本机项目，我安装了From This Turorial，我刚刚使用本教程将Splash Screen添加到我的项目中，但我得到了第一个：

0.5 secend splash screen photo
0.5下降闪屏照片
Then 1.5 secend white screen
然后1.5分白屏
And after that my app started,
然后，我的应用程序启动，

What is the best and standart way to fix This problem? I need Just 1 secend Standard preload for Splash Screen and after That app Start, I read more article but i coudn't fix by react native.

解决此问题的最佳方法是什么？我需要只有1个标准预加载启动屏幕和那个应用程序启动后，我读了更多的文章，但我不能通过本机反应修复。

<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>

4 个解决方案

#1

Here is another solution for both ios and android: https://github.com/mehcode/rn-splash-screen. I hid the splash screen in the render function of my app.tsx (the entry point) and showed the same image until all of my https requests were done.

这是ios和android的另一个解决方案：https：//github.com/mehcode/rn-splash-screen。我将启动画面隐藏在app.tsx（入口点）的渲染功能中，并显示相同的图像，直到我的所有https请求都完成。

My code:

我的代码：

public render()
    {
        SplashScreen.hide();

       //after everything has finished loading - show my app.
       if (this.state.isFinishedloading) 
        {
            return (
                <this.navigator screenProps={{ ...providers }} />
            );
        }

      // Until then show the same image as the splash screen with an ActivityIndicator.
        return (
           <View style={{ flex: 1 }}>
              <Image style={styles.image} source={require('../assets/img/splash.png')} >
                <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
              </Image>
           </View>
        );

    }

#2

First:
Run npm i react-native-splash-screen --save

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

Second step(Plugin Installation):
Automatic installation

第二步（插件安装）：自动安装

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

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

手动安装Android：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')

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

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

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

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

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

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

Example Code:

示例代码：

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:crazycodeboy@gmail.com
                    </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',
    },
})

#3

I too have been through this problem. In my case it was redux persist library that use to extract persisted state from storage and feed it into the reducers and this process use to take almost 1 second during that second it used to show white screen a little flicker and then it renders the actual screen.

我也经历过这个问题。在我的情况下，它是redux persist库，用于从存储中提取持久状态并将其提供给reducer并且此过程使用花费将近1秒，在此期间它用于显示白色屏幕稍微闪烁然后它呈现实际屏幕。

The work around i used is this actually the control to hide splash is on javascript side you are doing this to hide it.

我使用的工作实际上是隐藏启动的控件是在javascript方面，你这样做是为了隐藏它。

componentDidMount() {
    SplashScreen.hide();
}

Just add a little delay and it will work fine.

只需添加一点延迟就能正常工作。

componentDidMount() {
    setTimeout(() => SplashScreen.hide() , 2000);
}

#4

Had this issue, spent lots of time in debugging.

有这个问题，花了很多时间进行调试。

Solution: CSS property was duplicating in one of my components. Removing duplication fixed white screen issue for me.

解决方案：CSS属性在我的一个组件中重复。删除重复修复白屏问题给我。

#1