React-Native pre-load uri пока веб-просмотр не отображается

Question

У меня есть веб-просмотр в реакции следующим образом.

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

Когда я устанавливаю this.state.url Я хотел бы WebView немедленно загрузить URL, а затем после загрузки OnLoad или onLoadEnd вызывает функцию SHOWPAGE, которая показывает содержание WebView. Кажется, я не могу заставить это работать - веб-просмотр загружает только URL-адрес, когда он отображается в dom. Есть ли способ сделать это?

Answer 1

Самое простое решение - использовать свойство renderLoading для WebView. Если вам нужно настроить логику загрузчика, вы можете использовать что-то вроде этого:

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