RN-第三方控件示例

RN-第三方-react-native-img-cache 图片

2017-06-28  本文已影响328人  精神病患者link常

RN时间长了,非常想念iOS的SDWebImage...

本文内容
react-native-img-cache的简单使用
https://github.com/wcandillon/react-native-img-cache

使用

1、使用react-native-img-cache这个的前提需要react-native-fetch-blob(用来下载图片的吧(猜测)),

所以需要

npm install --save react-native-fetch-blob
react-native link

其他的方式参考react-native-fetch-blob主页

2、导入react-native-img-cache --save

npm install react-native-img-cache --save

3、使用

import {CachedImage, ImageCache} from "react-native-img-cache";

CachedImage:用来显示图片
ImageCache:用来管理的,比如获取图片的路径、清理缓存神马的

4、加载图片

<CachedImage
                    style={{width:100, height: 100}}
                    source={{ uri: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg" }} />

5、管理图片

// 获取图片的缓存路径
 let a ="http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=d8d47aee8435e5dd9079add946f68bd7/f31fbe096b63f624fc76a3bf8644ebf81a4ca367.jpg";
        let sss = ImageCache.get().getPath(a);
        console.log(sss);
        
// 清理缓存
        ImageCache.get().clear();

6、还有更多其他的操作,取消啊、直接从本地读啦等等的,具体的可以看react-native-img-cache主页

上一篇 下一篇

猜你喜欢

热点阅读