React Native 0.72.4 应用缓存程序化清理方案求助

针对缓存累积导致应用卡顿的问题，以下是适配RN 0.72.4的程序化清理方案，覆盖常见缓存类型：

1. 清理AsyncStorage缓存 #

如果你的应用使用@react-native-async-storage/async-storage存储缓存数据，可直接调用API清除：

• 清除全部AsyncStorage缓存：

import AsyncStorage from '@react-native-async-storage/async-storage';

const clearAsyncStorageCache = async () => {
  try {
    await AsyncStorage.clear();
    console.log('AsyncStorage缓存已清除');
  } catch (e) {
    console.error('清除AsyncStorage缓存失败:', e);
  }
};

• 清除特定前缀的缓存键（比如以cache_开头的键）：

const clearSpecificAsyncStorageCache = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    const cacheKeys = keys.filter(key => key.startsWith('cache_'));
    await AsyncStorage.multiRemove(cacheKeys);
    console.log('指定AsyncStorage缓存已清除');
  } catch (e) {
    console.error('清除指定AsyncStorage缓存失败:', e);
  }
};

2. 清理图片缓存 #

方案A：使用FastImage（推荐） #

如果应用使用react-native-fast-image加载图片，它自带缓存清理API：

import FastImage from 'react-native-fast-image';

// 清除磁盘缓存
const clearFastImageDiskCache = async () => {
  try {
    await FastImage.clearDiskCache();
    console.log('FastImage磁盘缓存已清除');
  } catch (e) {
    console.error('清除FastImage磁盘缓存失败:', e);
  }
};

// 清除内存缓存
const clearFastImageMemoryCache = () => {
  FastImage.clearMemoryCache();
  console.log('FastImage内存缓存已清除');
};

方案B：RN原生Image组件 #

RN原生Image在iOS依赖SDWebImage、Android依赖Glide，需通过原生模块实现缓存清理：

iOS原生模块（Objective-C）

创建CacheCleaner.m和CacheCleaner.h文件：

// CacheCleaner.h
#import <React/RCTBridgeModule.h>

@interface CacheCleaner : NSObject <RCTBridgeModule>
@end

// CacheCleaner.m
#import "CacheCleaner.h"
#import <SDWebImage/SDImageCache.h>

@implementation CacheCleaner

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(clearImageCache:(RCTResponseSenderBlock)callback) {
  [[SDImageCache sharedImageCache] clearDiskOnCompletion:^{
    [[SDImageCache sharedImageCache] clearMemory];
    callback(@[@"图片缓存已清除"]);
  }];
}

@end

Android原生模块（Kotlin）

创建CacheCleanerModule.kt：

package com.yourappname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.bumptech.glide.Glide;

class CacheCleanerModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "CacheCleaner"
    }

    @ReactMethod
    fun clearImageCache() {
        Glide.get(reactApplicationContext).clearDiskCache()
        Glide.get(reactApplicationContext).clearMemory()
    }
}

RN中调用：

import { NativeModules } from 'react-native';
const { CacheCleaner } = NativeModules;

// 清除原生Image缓存
const clearNativeImageCache = async () => {
  try {
    await CacheCleaner.clearImageCache();
    console.log('原生Image缓存已清除');
  } catch (e) {
    console.error('清除原生Image缓存失败:', e);
  }
};

3. 清理应用缓存目录 #

如果应用在自定义缓存目录存储了临时文件，可用react-native-fs操作文件系统删除：

先安装依赖：

npm install react-native-fs --save

清理代码：

import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

const clearAppCacheDir = async () => {
  try {
    const cacheDir = Platform.OS === 'ios' 
      ? RNFS.CachesDirectoryPath 
      : RNFS.ExternalCachesDirectoryPath || RNFS.CachesDirectoryPath;
    
    const files = await RNFS.readDir(cacheDir);
    for (const file of files) {
      await RNFS.unlink(file.path);
    }
    console.log('应用缓存目录已清空');
  } catch (e) {
    console.error('清除应用缓存目录失败:', e);
  }
};

4. 开发环境Metro缓存清理（额外） #

若开发环境下Metro缓存导致问题，可执行终端命令清理：

npx react-native start --reset-cache

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