React-Native实战之（清理app缓存＋Redux合成）

最新推荐文章于 2025-09-19 01:12:31 发布

原创

最新推荐文章于 2025-09-19 01:12:31 发布 · 1.3w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#rn #native #开发经验 #app #缓存

本文介绍了在React Native应用中实现清理缓存功能的详细步骤，包括在Android和iOS平台上的实现，并探讨了如何通过Redux进行状态管理以解决跨页面数据交互的问题。作者分享了在Android中清理OkHttp和Fresco缓存的代码，并提到iOS实现的简便性。文章还提及了在JS中调用原生模块时遇到的异步操作挑战以及Redux在解决页面间数据同步中的作用。

前言：好久没写博客了，因为这段时间一直在搞rn，程序员真是一个苦逼的职业啊，被逼着去学习了下React Native，这东西吧，感觉有点原生app开发经验的童鞋上手还是比较容易的，搞前端的就更不用说了～分分钟就上手了，说多了都是泪啊。。。废话不多说了，先上一篇RN实战中用的一些东西，不为别的，就当笔记了，顺便总结一下所学知识，（ps：实战项目是花了点钱去某宝买的视频，这哥们讲的还不错，需要的童鞋可以私聊我，无私奉献，嘿嘿！！～～）

（一）需求分析：
先上一张需求图：
这里写图片描述
项目中有一个清理缓存的功能，这功能吧很多app都有了，在原生app中清理缓存吧，其实很简单，就是清理一下存储在磁盘的一些图片，然后还有些网络框架有一些网络缓存，（当然，肯定不会把app中所有缓存清掉的，套路都懂得～）在原生app中，想必大家应该很快就可以实现了，但是rn中应该怎么做呢？

（二）实现思路
因为rn的api中根本就没有给我们提供任何清理缓存的方法，所以介于这种状况下，我们肯定是需要去实现原生app方法的（所以我说会原生app开发rn，其实还是很容易的！！），因为我是做android的，我就以android为例子了。搞过rn的童鞋都知道，android部分网络请求用的是okhttp，图片加载用的是fresco，所以我们的目标就是清理一下okhttp的缓存，跟fresco的缓存就可以了（用过这两个框架的童鞋应该很容易就实现了）。我就直接贴代码了：

1、android中首先创建一个HttpCacheModule.java的文件：

package cn.reactnative.httpcache;

import android.content.Intent;

import com.facebook.cache.disk.DiskStorageCache;
import com.facebook.cache.disk.FileCache;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.imagepipeline.core.ImagePipelineFactory;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.network.OkHttpClientProvider;
import okhttp3.Cache;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.ArrayList;

public class HttpCacheModule extends ReactContextBaseJavaModule {
   
   
    public HttpCacheModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    public String getName() {
        return "RCTHttpCache";//native代码模块的名字
    }
    /**
     * Promise相当于一个代理对象,当需要返回值的时候
     * promise.resolve(obj);这样js中就可以拿到这个代理对象了,在then方法中会返回
     * promise.reject(e);相当于native中报错了,没有拿到返回值,在erro方法中返回erro
     */
    @ReactMethod
    public void clearCache<