javascript - React-Native 预加载 uri 而 webview 不可见

Question

我有一个 react 如下的 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 内容。我似乎无法让它工作 - web View 仅在 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'
  }
});