React-Native UI laden, während Webview nicht sichtbar ist

Question

Ich habe ein Webview wie folgt reagieren.

 <WebView 
     source={{ uri: this.state.url }} 
     style={ this.state.style } 
     javaScriptEnabled = { true } 
     startInLoadingState = {true} 
     onLoad = {this.showPage()} 
     onLoadEnd = {this.showPage()} 
     /> 

Als ich eingestellt this.state.url ich die Webansicht möchte die URL sofort, und dann laden, nach dem Laden onLoad oder onLoadEnd ruft die showpage Funktion, die den Webansicht Inhalt zeigt. Ich kann nicht scheinen, dass dies funktioniert - die Webansicht lädt nur die URL, wenn es in der Dom sichtbar ist. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Die einfachste Lösung ist die Verwendung der RenderLoading-Eigenschaft von WebView. Wenn Sie Loader-Logik anpassen müssen, können Sie etwas wie folgt verwenden:

class WebScreen extends Component { 
    ... 
    render() { 
    const { isLoading } = this.state; 
    return (
     <View style={styles.container}> 
     <ReactWebView 
      style={styles.webview} 
      source={{ uri: url }} 
      onLoadStart={::this.onLoadStart} 
      onLoadEnd={::this.onLoadEnd} 
     /> 
     {isLoading && (
      <WebViewLoader style={styles.loader} /> 
     )} 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 

    loader: { 
    position: 'absolute', 
    top: 0, 
    right: 0, 
    bottom: 0, 
    left: 0, 
    zIndex: 4, 
    backgroundColor: 'white' 
    } 
});