How to Remove White Screen after Splash Screen in React Native For Android

问题

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:

a 0.5 secend splash screen photo
then 1.5 secend white screen
and after that my app started,

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>

回答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.

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:

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.

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

componentDidMount() {
    SplashScreen.hide();
}

Just add a little delay and it will work fine.

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

回答3:

First:
Run 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:

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:

...
dependencies {
    ...
    compile project(':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;
    }
}

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',
    },
})

回答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.

回答5:

I fix this by following steps mentioned by @sergiulucaci on GitHub like this and it worked

Go to android/app/src/main/res/values/styles.xml

Disable the app's preview as follows:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item> // <--- ADD THIS
        // Other items...
    </style>
</resources>

回答6:

Also had this issue.

Changing splash screen background color to the one which I use on the next screen saved the situation for both platforms

来源：https://stackoverflow.com/questions/44384491/how-to-remove-white-screen-after-splash-screen-in-react-native-for-android

标签

react-native

splash-screen