React Native iOS端调用clearCache报错：未找到对应命令

问题详情 #

在React Native（Expo）应用中实现WebView缓存清除逻辑，Android端运行正常，但iOS开发环境构建后执行时出现报错：No command found with name 'clearCache'，终端无日志输出，catch代码块未触发。测试环境覆盖iOS 17.1和16.4.1(a)，使用Expo 49.0.16版本，react-native-webview版本为13.6.2。

相关代码：

async function checkAndUpdateAppVersion(pCallBack) {
    const currentBuildVersion = nativeBuildVersion;
    const previousBuildVersion = await AsyncStorage.getItem("buildVersion");
    try {
      if (currentBuildVersion !== previousBuildVersion) {
        //AsyncStorage.setItem("buildVersion", currentVersion);
        const { clearCache } = webviewRef.current;
        clearCache && clearCache(true);
      }
    } catch (error) {
      console.warn(error);
    } finally {
      pCallBack && pCallBack(); // Executa o callback caso exista
    }
  }

项目package.json核心依赖：

{
  "dependencies": {
    "expo": "^49.0.16",
    "react-native": "0.72.6",
    "react-native-webview": "^13.6.2"
  }
}

解决方案 #

1. 明确iOS端WebView的方法差异 #

react-native-webview的clearCache方法在iOS端的实现和Android端存在差异：Android端直接暴露该方法，而iOS端的WebView实例初始化完成前调用会触发找不到命令的报错，且部分版本的库在iOS端对该方法的支持存在兼容问题。

2. 替换为iOS原生兼容的缓存清除方案 #

方案一：使用Expo官方模块（Managed Workflow适用）

如果WebView加载的是外部网页，可以用expo-web-browser提供的缓存清除API替代，该API直接调用iOS原生WebKit缓存清理逻辑：

import * as WebBrowser from 'expo-web-browser';
import { Platform } from 'react-native';

async function checkAndUpdateAppVersion(pCallBack) {
    const currentBuildVersion = nativeBuildVersion;
    const previousBuildVersion = await AsyncStorage.getItem("buildVersion");
    try {
      if (currentBuildVersion !== previousBuildVersion) {
        if (Platform.OS === 'android') {
          const { clearCache } = webviewRef.current;
          clearCache && clearCache(true);
        } else {
          // iOS端调用expo-web-browser的缓存清除方法
          await WebBrowser.clearCacheAsync();
        }
        await AsyncStorage.setItem("buildVersion", currentBuildVersion);
      }
    } catch (error) {
      console.warn(error);
    } finally {
      pCallBack && pCallBack();
    }
  }

方案二：自定义iOS原生逻辑（Bare Workflow适用）

如果使用Expo裸工作流，可以直接在iOS原生代码中实现缓存清除，再通过NativeModule暴露给JS层：

1. 在iOS项目的自定义模块或AppDelegate.m中添加：

#import <WebKit/WebKit.h>

- (void)clearWebViewCache {
    WKWebsiteDataStore *dataStore = [WKWebsiteDataStore defaultDataStore];
    [dataStore fetchDataRecordsOfTypes:[WKWebsiteDataStore allWebsiteDataTypes] completionHandler:^(NSArray<WKWebsiteDataRecord *> * __nonnull records) {
        for (WKWebsiteDataRecord *record in records) {
            [dataStore removeDataOfTypes:record.dataTypes forDataRecords:@[record] completionHandler:^{}];
        }
    }];
}

2. 通过NativeModule将该方法注册后，在JS层调用即可。

3. 确保WebView实例初始化完成后再调用 #

添加WebView加载完成的标记，避免在实例未就绪时调用方法：

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

// 组件内状态
const [webViewReady, setWebViewReady] = useState(false);

// WebView组件
<WebView
  ref={webviewRef}
  onLoadEnd={() => setWebViewReady(true)}
  // 其他属性
/>

// 在checkAndUpdateAppVersion中增加判断
async function checkAndUpdateAppVersion(pCallBack) {
    // ... 原有逻辑
    try {
      if (currentBuildVersion !== previousBuildVersion && webViewReady) {
        // ... 执行缓存清除
      }
    }
    // ... 剩余逻辑
}

4. 升级react-native-webview版本 #

尝试升级到最新稳定版，可能该兼容问题已被修复：

npm install react-native-webview@latest

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