rn react-native-image-lazy-loading
npm install react-native-image-lazy-loading -S
import React from 'react';
import { Dimensions, InteractionManager, StyleSheet, Text, View, Image } from 'react-native';
import ImageLazy from 'react-native-image-lazy-loading';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
export default class ImageLazyLoading extends React.PureComponent {
constructor(props) {
super(props);
// 先给图片一个默认宽高
this.state = {
width: screenWidth,
height: 300,
loaded: false,
};
this._onLayout = this._onLayout.bind(this);
}
// 2、获取组件初始化位置
_onLayout(e, node) {
let { y } = e.nativeEvent.layout;
this.setState({
offsetY: y,
});
}
// 获取加载中、加载失败视图的函数
_renderLoad(text) {
return (
<View style={styles.loadContainer} onLayout={this._onLayout}>
<Text style={styles.loadText}>{text}</Text>
</View>
);
}
// 从网络请求图片的方法
_fetchImg() {
InteractionManager.runAfterInteractions(() => {
const { source, style } = this.props;
if (source.uri) {
// 如果是网络图片 在页面还未加载前，获取图片宽高
Image.getSize(
source.uri,
(w, h) => {
console.log('wwwww', w, h);
let imgHeight = (h / w) * this.state.width;
this.setState({
height: imgHeight,
loaded: true,
});
},
(err) => {
// 获取图片宽高或者下载图片失败
this.setState({
loadFail: true,
});
},
);
}
});
}
render() {
const { source, y } = this.props;
// 3、判断是否可以加载图片了
console.log(y, screenHeight, this.state.offsetY, this.state.loaded);
if (y + screenHeight >= this.state.offsetY && !this.state.loaded) {
// 请求图片
this._fetchImg();
}
// 4、如果加载了远程图片，就会渲染这里
if (this.state.loaded) {
// 如果真正的图片加载好
return <ImageLazy source={source} style={{ height: this.state.height }} resizeMode={'contain'} />;
}
// 1、会先显示加载中视图
return this._renderLoad('正在加载中...');
}
}
const styles = StyleSheet.create({
// 加载容器样式
loadContainer: {
backgroundColor: '#eee',
justifyContent: 'center',
alignItems: 'center',
height: 100,
marginVertical: 10,
},
// 加载样式
loadText: {
fontSize: 20,
color: '#ccc',
},
});
-----------------------------------------------
<ImageLazyLoading source={item.imgSrcUrl ? { uri: item.imgSrcUrl } : {}} style={[styles.picSrc]} />