当webview不可见时，React-Native预加载uri

Question

我有一个webview的反应如下。

      <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内容。 我似乎无法让它工作 - webview只在dom中可见时加载url。 有没有办法做到这一点？

Answer 1

最简单的解决方案是使用WebView的renderLoading属性。 如果需要自定义加载器逻辑，可以使用以下内容：

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