React Native WebView 强制刷新解决方案

在 React Native 中使用 WebView 时，如果需要每次打开都强制刷新页面，可以通过以下几种方法实现：

1. 使用 key 强制重新加载组件

import React, {useState} from 'react';
import {WebView} from 'react-native-webview';

const MyWebView = () => {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <WebView
      key={refreshKey} // 修改key会强制重新加载组件
      source={{uri: 'https://example.com'}}
      onLoadStart={() => {
        // 每次加载时更新key，确保下次打开会刷新
        setRefreshKey(prev => prev + 1);
      }}
    />
  );
};

2. 使用 injectedJavaScript 清除缓存

<WebView
  source={{uri: 'https://example.com'}}
  injectedJavaScript={`
    // 清除缓存
    window.location.reload(true);
    true; // 必须返回true
  `}
  onMessage={() => {}}
/>

3. 使用 cacheEnabled 属性 (iOS 专用)

<WebView
  source={{uri: 'https://example.com'}}
  cacheEnabled={false} // 禁用缓存(iOS)
/>

4. 添加随机查询参数

<WebView
  source={{uri: `https://example.com?timestamp=${Date.now()}`}}
/>

5. 使用 ref 手动刷新

import React, {useRef} from 'react';
import {WebView} from 'react-native-webview';

const MyWebView = () => {
  const webViewRef = useRef(null);

  return (
    <WebView
      ref={webViewRef}
      source={{uri: 'https://example.com'}}
      onLoadEnd={() => {
        // 加载完成后立即刷新
        webViewRef.current?.reload();
      }}
    />
  );
};

注意事项

1. 强制刷新可能会影响性能，特别是对于大型网页
2. 某些网站可能会阻止频繁刷新
3. 在 Android 上，可能需要额外处理缓存控制
4. 考虑用户体验，避免不必要的刷新

选择哪种方法取决于你的具体需求和目标平台。第一种方法（使用 key）通常是最可靠的跨平台解决方案。