web-dev-qa-db-fra.com

React-Native: afficher l'écran de chargement jusqu'à ce que la vue Web soit chargée

J'ai actuellement un composant SplashScreen que je rend en premier jusqu'à ce que mon état soit défini. J'aimerais en quelque sorte trouver un moyen de toujours montrer ce composant pendant que ma vue Web est chargée. J'ai ajouté onLoadEnd à ma vue Web et on dirait que je reçois mon message lorsque son chargement est terminé, le problème est que si je charge d'abord l'écran de démarrage et attend que l'état soit modifié onLoadEnd ne sera jamais modifié car la vue Web n'est pas encore rendu. Existe-t-il une bonne méthode pour y parvenir?

androidreactjswebviewreact-native
12
NinetyHH

Ma solution était en fait assez simple, le composant WebView peut avoir le paramètre renderLoading qui pour moi ne fonctionnait pas, j'ai compris que c'était parce que startInLoadingState devait également être défini.

Donc, mon WebView ressemble à ceci:

<WebView
   ref={MY_REF}
   source={source}
   renderLoading={this.renderLoading}
   startInLoadingState
/>
34
NinetyHH

Ce serait mon approche:

constructor(props){
    super(props);
    this.state = { webviewLoaded: false };
}

_onLoadEnd() {
    this.setState({ webviewLoaded: true });
}

render() {
    return(
        <View>
            {(this.state.webviewLoaded) ? null : <SplashScreen />}
            <WebView onLoadEnd={this._onLoadEnd.bind(this)} />
        </View>
    )
}

De cette façon, la vue Web est rendue mais elle est placée derrière le SplashScreen. La vue Web commence donc à se charger pendant que SplashScreen est affiché.

11
Jan Franz Palngipang

J'ai eu un problème similaire et j'ai réussi à le résoudre temporairement avec ceci:

loadEnd () {
 this.setState({ webViewLoaded: true }):
}
render () {
const { webViewLoaded } = this.state;
return (<View> 
      {!webViewLoaded && <LoadingComponent /> } -- or spinner, whatever

         <WebView 
            style={(webViewLoaded) ? styles.webView : styles.loading}
            onLoadEnd={() => this.loadEnd.bind(this)} /> 
      </View);

}

const styles = StyleSheet.create({
  webView: { -- your styles ---},
  loading: {
    width: 0,
    heigt: 0
  }
});

je ne sais pas exactement si cela vous aide, mais vous pouvez essayer une approche similaire. Je vais probablement changer cela en quelque chose de plus pratique. Je ne sais pas s'il existe des possibilités pour animer ces changements, car je suis toujours assez novice en React Native.

edit: ajout de masquage de l'élément spinner/loading

2
uRTLy