如何刷新React Native（Expo托管）App中WebView的内容？

你遇到的问题是WebView默认启用了缓存机制，导致网站更新后，App里的WebView仍加载本地缓存的旧内容，只有重装App才会清除缓存。下面是几个直接有效的解决办法：

1. 给WebView请求添加缓存控制头 #

在WebView的source配置里添加HTTP请求头，强制WebView不使用缓存：

source={{
  uri: "mywebsite",
  headers: {
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': '0'
  }
}}

这些头信息的作用：

• no-cache：要求WebView必须向服务器验证缓存内容是否有效
• no-store：禁止WebView存储任何请求或响应的缓存文件
• must-revalidate：缓存过期后必须重新向服务器验证
• Expires: 0：直接标记缓存立即过期

2. 强制WebView跳过缓存刷新页面 #

替换原来的普通reload()方法，用injectJavaScript执行带强制刷新的命令，确保彻底绕过缓存：

useEffect(() => {
  webViewRef.current?.injectJavaScript('location.reload(true);');
}, []);

location.reload(true)会强制WebView从服务器重新拉取完整页面，而不是读取本地缓存的内容。

3. 检查网站服务器的缓存配置 #

从源头优化缓存策略，避免后续再出现类似问题：

• 给静态资源（如CSS、JS、图片）添加哈希文件名（比如style.abc123.css），更新内容时自动更换文件名，让WebView自动加载新资源
• 在服务器响应头里设置较短的缓存过期时间（如Cache-Control: max-age=300，即5分钟过期）

修改后的完整代码 #

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

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

  useEffect(() => {
    // 强制跳过缓存刷新页面
    webViewRef.current?.injectJavaScript('location.reload(true);');
  }, []);

  return (
    <WebView
      bounces={false}
      ref={webViewRef}
      source={{
        uri: "mywebsite",
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          'Pragma': 'no-cache',
          'Expires': '0'
        }
      }}
    />
  );
};

export default MyWebView;

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