React Native WebView切回应用后空白，使用AppState重载时出错的技术求助

我太懂你这个头疼的问题了——从外部浏览器切回App后WebView直接空白，想靠AppState监听重新加载还出了错。让我帮你捋清楚问题根源，再给你一套能跑通的修复方案。

问题出在哪儿：Ref使用方式错误 #

你代码里的WebView ref赋值逻辑有个隐形bug：

let webview = React.useRef(null);
// ...
<WebView
  ref={ref => { webview = ref; }}
  // ...
/>

useRef返回的是一个带current属性的固定对象，你直接把webview变量赋值为ref，等于覆盖了useRef创建的引用容器。当组件重新渲染时，这个变量很可能会丢失对WebView实例的正确引用，导致调用webview.reload()时直接报错，WebView自然没法重新加载内容，只能显示空白。

修复后的完整代码 #

我们要正确利用useRef的current属性，同时在调用WebView方法前加一层存在性检查，避免报错。以下是修改后的代码：

import React from 'react';
import { View, AppState, Linking } from 'react-native';
import { WebView } from 'react-native-webview'; // 建议直接import，别在组件内require
import CircleLoading from './你的CircleLoading组件路径'; // 替换成你实际的组件路径

function Screen(props) {
  const [appState, setAppState] = React.useState(AppState.currentState);
  const webviewRef = React.useRef(null); // 正确初始化useRef引用

  React.useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      if (nextAppState === 'active') {
        // 先确认引用存在，再调用reload
        if (webviewRef.current) {
          webviewRef.current.reload();
        }
      }
      setAppState(nextAppState);
    };

    AppState.addEventListener('change', handleAppStateChange);
    return () => AppState.removeEventListener('change', handleAppStateChange);
  }, []);

  function backHandler() {
    popScreen(Screens.About);
    return true;
  }

  return (
    <View style={styles.container}>
      <View style={styles.web}>
        <WebView
          ref={webviewRef} // 直接传递ref对象，自动绑定到current属性
          source={{ uri: props.link }}
          androidHardwareAccelerationDisabled={true}
          startInLoadingState={true}
          onNavigationStateChange={(event) => {
            if (event.url !== props.link) {
              if (webviewRef.current) {
                webviewRef.current.stopLoading();
              }
              Linking.openURL(event.url);
            }
          }}
          renderLoading={() => (
            <CircleLoading containerStyle={[styles.loading]} renderLoading={true} />
          )}
        />
      </View>
    </View>
  );
}

// 补充样式定义（根据你的实际需求调整）
const styles = {
  container: {
    flex: 1,
  },
  web: {
    flex: 1,
  },
  loading: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

export default Screen;

关键修改点说明 #

1. 正确使用useRef：用webviewRef.current存储WebView实例，不再覆盖ref变量，保证引用始终有效
2. 增加安全检查：调用reload()和stopLoading()前，先确认webviewRef.current不为空，避免运行时错误
3. 优化导入方式：把WebView的import移到组件外部，这是React组件的标准写法，避免重复加载

额外优化建议 #

如果修复后还是偶尔出现空白，可以尝试在AppState切换到active时，用JS注入的方式强制刷新：

if (nextAppState === 'active') {
  if (webviewRef.current) {
    webviewRef.current.injectJavaScript('window.location.reload(true);');
  }
}

内容的提问来源于stack exchange，提问作者Mohamadamin