如何在 appState 更改时重新加载 react-native-webview 内容

Question

我的应用程序中有一个网络视图。我为它设置了 onNavigationStateChange 道具来处理点击 webview 上的任何 link 并将用户导航到浏览器。问题是当用户在浏览器上按 BackAndroid 返回时，我的应用程序 webview 内容未显示并且屏幕为空和白色。对于这个问题，我尝试使用 appState 并处理其更改以在返回我的应用程序后重新加载 webview，但出现此错误

这是我的代码：

function Screen(props) {
  const [appState, setAppState] = React.useState(AppState.currentState);
  let webview = React.useRef(null);
  React.useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);
    return () => AppState.removeEventListener('change', handleAppStateChange);
  }, []);
  function backHandler() {
    popScreen(Screens.About);
    return true;
  }
  function handleAppStateChange(nextAppState) {
    if (nextAppState === 'active') {
      webview.reload();
    }
    setAppState(nextAppState);
  }
  const WebView = require('react-native-webview').default;
  return (
      <View style={styles.container}>
        <View style={styles.web}>
          <WebView
            ref={ref => {
              webview = ref;
            }}
            source={{uri: props.link}}
            androidHardwareAccelerationDisabled={true} // for prevent crash
            startInLoadingState={true}
            onNavigationStateChange={event => {
              if (event.url !== props.link) {
                webview.stopLoading();
                Linking.openURL(event.url);
              }
            }}
            renderLoading={() => (
              <CircleLoading
                containerStyle={[styles.loading]}
                renderLoading={true}
              />
            )}
          />
        </View>
      </View>
  );
}

谢谢。

Answer 1

这样试试：

const [appState, setAppState] = React.useState(AppState.currentState);
  const webview = React.useRef(null);
  React.useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);
    return () => AppState.removeEventListener('change', handleAppStateChange);
  }, [webview.current]);//    <---- CHANGED
  function backHandler() {
    popScreen(Screens.About);
    return true;
  }
  function handleAppStateChange(nextAppState) {
    if (nextAppState === 'active') {
      webview.current.reload(); //     <---- CHANGED
    }
    setAppState(nextAppState);
  }
  const WebView = require('react-native-webview').default; //  <---- remove it and import it at top of file
  return (
      <View style={styles.container}>
        <View style={styles.web}>
          <WebView
            ref={webview} //    <---- CHANGED
            ..

如何在 appState 更改时重新加载 react-native-webview 内容

How to reload react-native-webview content on appState change

android

webview

react-native

react-native-webview