有没有一个好的库或者一些默认的React Native组件可以缓存来自URL的图像? 我已经尝试了react-native-cache-image,但是它与react-native-fs和react-native-sqlite-storage存在许多问题,由于我是React Native的新手,我不知道如何正确修复它们。
有没有一个好的库或者一些默认的React Native组件可以缓存来自URL的图像? 我已经尝试了react-native-cache-image,但是它与react-native-fs和react-native-sqlite-storage存在许多问题,由于我是React Native的新手,我不知道如何正确修复它们。
使用yarn添加react-native-fast-image依赖包
参考:https://github.com/DylanVann/react-native-fast-image
import FastImage from 'react-native-fast-image'
<FastImage
style={{ width: 200, height: 200 }}
source={{ uri: 'https://unsplash.it/400/400?image=1' }}
resizeMode={FastImage.resizeMode.stretch}
/>
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
</View>
);
}
}
第一张图片将被缓存,直到本地缓存总量超过15 MB(默认值),然后最旧的缓存图像将被删除,直到总缓存低于15 MB。
第二个图像将永久存储在本地磁盘上。人们使用它作为静态图像文件的替代品,与您的应用程序一起发布。
另外,您似乎有兴趣任意地将图像文件存储到本地磁盘上。您可以使用CacheableImage静态方法来实现:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true)
.then( localFileInfo => {
console.log(localFileInfo);
// Console log outputs:
//{
// url: 'https://i.redd.it/rc29s4bz61uz.png',
// cacheType: 'permanent',
// localFilePath: '/this/is/absolute/path/to/file.jpg'
//}
});
import React from 'react';
import Expo from 'expo';
import { Image, View } from 'react-native';
import logo from './assets/icon.png';
const cacheImages = images => images.map(image => {
if (typeof image === 'string') return Image.prefetch(image);
return Expo.Asset.fromModule(image).downloadAsync();
});
class View extends React.component {
state = {
appIsReady: false
}
componentWillMount() {
this.loadAssetsAsync();
}
async loadAssetsAsync = () => {
const imageAssets = cacheImages([icon]);
await Promise.all([...imageAssets]);
this.setState({ appIsReady: true });
}
render() {
return(
<View>
<Image source={logo} style={styles.imageStyle} />
</View>
);
}
}
true
。您将拥有处理工作的cacheImages
函数。您唯一需要的要求是Expo。yarn add picache
然后在您的js文件中使用它,首先导入该文件并使用它。欲了解更多信息,请点击。import Picache from "picache";
const App = () => (
<Picache
style={{ height: 150, width: 350 }}
source={require("./square.png")}
/>
);
Image
组件内置了prefetch()
方法。