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

Question

I have a webview as tab A and a todolist flatlist on tab B. If the user adds an entry to the flatlist on tab B, i want the tab A webview to refresh.

I couldn't find any .refresh() or reload() methods on the webview control https://facebook.github.io/react-native/docs/webview.html

Any ideas how to accomplish this?

Answer 1

Well I reload WebView by doing following:

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

In this code I Declare Reference Variable WebViewRef first then assign this to WebView as ref={WEBVIEW_REF => (WebViewRef = WEBVIEW_REF)} and then call this reference for reload() as ()=>{ WebViewRef && WebViewRef.reload();}

Answer 2

You can set a key to the webview

key={this.state.key}

and then you can reload it by updating the state

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

Answer 3

The react-native-community/react-native-webview component has a .reload() method on the ref.

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

Then call webViewRef.current.reload(); to reload.

See react-native-webview/docs/Reference.md#reload

Answer 4

I ended up using a dummy query parameter to signal a refresh of the web view:

In Tab B, I dispatch a change which changes "latestItemId" in the global state. In Tab A, I use mapStateToProps which maps to <WebView source={{uri:URL?latestItemId=${latestItemId}}} /> in the render method. This causes it to think it's a new url and reload it.

Answer 5

Reload was not working on my end.

If you want to refresh on focus change you can use the hook useFocusEffect of react navigation and in the unmount clean the URL used in the webview. Then in the initialize you need to set that again. Maybe using aa useState.

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

Answer 6

In my case I have source={{html}} so refresh() won't work in that situation. However, in my case I am still able to inject javascript so I can set some properties specifically document.styles.body.color to match dark and light mode.

  const fg = colorScheme === "light" ? "black" : "white";
  const webViewRef = createRef<WebView>();
  useEffect(() => {
    webViewRef.current?.injectJavaScript(`
      document.body.style.color='${fg}';
      true
    `);
  }, [fg]);

...
  <WebView
    ref={webViewRef}
    originWhitelist={["*"]}
    style={{
      height: 200,
      backgroundColor: "transparent",
    }}
    onMessage={() => {}}
    javaScriptEnabled={true}
    injectedJavaScript={`
      document.body.style.color='${fg}';
      true;`}
    source={{ html }}
  />