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

Question

我在标签B上有一个webview,在标签B上有一个todolist平面列表.如果用户在标签B的平面列表中添加一个条目,我希望标签A webview能够刷新.

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

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

Answer 1

该react-native-community/react-native-webview组件.reload()在ref.

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

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

webViewRef.current.reload();

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首先声明引用变量,然后将其指定为WebViewas ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF)},然后将此referance reload()称为as()=>{ WebViewRef && WebViewRef.reload();}

Answer 3

您可以设置Web视图的键

key={this.state.key}

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

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

Answer 4

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

在选项卡 B 中，我调度了一个更改，该更改更改了全局状态中的“latestItemId”。在选项卡 A 中，我使用 mapStateToProps 映射到<WebView source={{uri:URL?latestItemId=${latestItemId}}} />渲染方法中。这会导致它认为这是一个新的网址并重新加载它。