web-dev-qa-db-fra.com

Comment faire pour supprimer l'écran blanc après l'écran de démarrage dans React Native pour Android

J'ai un projet natif de réaction par défaut et j'ai installé From This Turorial et je viens d'ajouter Splash Screen à mon projet avec ce tutoriel _, mais j'ai eu d'abord:

  • Photo de l'écran de démarrage 0.5 sec 
  • Puis 1,5 sec écran blanc
  • Et après que mon application a commencé,

Quel est le meilleur moyen de résoudre ce problème? J'ai besoin de seulement 1 sec. Précharge standard pour Splash Screen et après le démarrage de cette application, J'ai lu plus d'articles, mais je ne pouvais pas corriger en réagissant natif.

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

react-nativesplash-screen
6
Sedric Heidarizarei

Premier:
Exécuter npm i react-native-splash-screen --save

Deuxième étape (Installation du plugin):
Installation automatique 

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

Installation manuelle
Android:
1: Dans votre fichier Android/settings.gradle, ajoutez les ajouts suivants:

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

2: Dans votre fichier Android/app/build.gradle, ajoutez le projet :react-native-splash-screen en tant que dépendance à la compilation:

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

3: Mettez à jour le fichier MainApplication.Java pour utiliser react-native-splash-screen via les modifications suivantes:

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

Exemple de 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:[email protected]
                    </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',
    },
})
2
Sedric Heidarizarei

Voici une autre solution pour iOS et Android: https://github.com/mehcode/rn-splash-screen . J'ai masqué l'écran de démarrage dans la fonction de rendu de mon app.tsx (l'entrée point) et a montré la même image jusqu'à ce que toutes mes demandes https soient terminées.

Mon 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>
        );

    }
3
neomib

Moi aussi j'ai vécu ce problème. Dans mon cas, c’était une bibliothèque persistante redux utilisée pour extraire l’état persistant du stockage et l’alimenter dans les réducteurs. Ce processus prenait près d’une seconde au cours de cette seconde; . 

Le travail que j’ai fait est c’est-à-dire que le contrôle de masquage des éclaboussures se fait du côté javascript, ce que vous faites pour le masquer.

componentDidMount() {
    SplashScreen.hide();
}

Ajoutez juste un peu de retard et ça marchera bien.

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

Avait ce problème, passé beaucoup de temps dans le débogage.

Solution: La propriété CSS était en double dans l'un de mes composants. Supprimer la duplication a corrigé le problème de l'écran blanc pour moi.

1
Ahsanwarsi