Question

我在选项卡B上有一个webview作为标签A和一个todolist平面列表。如果用户在标签B的平面列表中添加一个条目，我希望标签A webview能够刷新。

我无法在网页浏览控件https://facebook.github.io/react-native/docs/webview.html

上找到任何.refresh()或reload()方法

任何想法如何实现这一目标？

Answer 1

请按照以下步骤重新加载 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 2

您可以设置Web视图的键

key={this.state.key}

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

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

Answer 3

react-native-community/react-native-webview组件在引用上具有.reload()方法。

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

然后调用webViewRef.current.reload();重新加载。

请参见react-native-webview/docs/Reference.md#reload

Answer 4

我最终使用虚拟查询参数来表示刷新Web视图：

在标签B中，我发送一个更改，更改＆＃34; latestItemId＆＃34;在全球的状态。在选项卡A中，我使用mapStateToProps，它在render方法中映射到<WebView source={{uri:URL?latestItemId=${latestItemId}}} />。这使它认为它是一个新的URL并重新加载它。

Answer 5

重新加载对我来说不起作用。

如果您想刷新焦点更改，您可以使用 react 导航的钩子 useFocusEffect 并在卸载时清除 webview 中使用的 URL。然后在初始化中你需要再次设置。也许使用 useState。

  useFocusEffect(
    useCallback(() => {
      setUrl(url!);
      return () => {
        setUrl(undefined);
      };
    }, [url]),
  );

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

5 个答案: