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

Posted 2023-05-07

【中文标题】如何在 appState 更改时重新加载 react-native-webview 内容

【英文标题】：How to reload react-native-webview content on appState change

【发布时间】：2021-10-13 02:12:00

【问题描述】：

我的应用中有一个网络视图。我为它设置了 onNavigationStateChange 道具来处理点击 webview 上的任何链接并将用户导航到浏览器。 问题是当用户在浏览器上按 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>
  );

谢谢。

【参考方案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
            ..