Question

如何在 React Native 中刷新 Web 视图？

2018-03-27

45042

react-native

我有一个 webview 作为选项卡 A，在选项卡 B 上有一个待办事项列表平面列表。如果用户在选项卡 B 上的平面列表中添加了一个条目，我希望刷新选项卡 A webview。

我在 webview 控件 https://facebook.github.io/react-native/docs/webview.html 上找不到任何 .refresh() 或 reload() 方法>

有什么想法如何实现这个吗？

Answer 1

您可以为 webview 设置一个键

key={this.state.key}

然后您可以通过更新状态来重新加载它

this.setState({ key: this.state.key + 1 });

Answer 2

好吧，我通过执行以下操作重新加载 WebView ：

render() {
  let WebViewRef;
  return (
    <View style={Style1.container}>
      <WebView
        ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF)}
        source={{ uri: this.state.site }}
        renderLoading={this.ActivityIndicatorLoadingView}
        startInLoadingState={true}
      />
      <Button title="Reload Me!" onpress={() => { WebViewRef && WebViewRef.reload(); }} />
    </View>
  )
}

在此代码中，我首先声明引用变量 WebViewRef ，然后将其分配给 WebView 作为 ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF) ，然后为 reload() 调用此引用，作为 ()=>{ WebViewRef && WebViewRef.reload();

Answer 3

react-native-community/react-native-webview 组件在 ref 上有一个 .reload() 方法。

const webViewRef = useRef();
// ...
return (
    <WebView ref={(ref) => webViewRef.current = ref} ... />
)
// ...

然后，您可以使用以下命令重新加载：

webViewRef.current.reload();