类似知乎或者微信，在文章详情页面，图片并非是一次性加载完成，而是在滑动到快看到图片时才开始加载，很明显原生 Image 组件并不支持这种特性，所以需要封装一层。
原理
首先图片组件必须放在 ScrollView 组件内。
图片组件在页面完成布局后，根据onLayout属性可以获取到这个组件在容器中的 x、y 值。
监听 ScrollView 滚动事件，onScroll会给出内容偏移量 contentOffset。当内容偏移量大于等于图片组件的 y 值减去屏幕高度时，就可以加载图片了。
懒加载原理
具体实现
首先搭建好页面，为了填充内容复制了知乎上的一篇文章《如何去阅读并学习一些优秀的开源框架的源码？》
// imageLazyloadDemo.js
import React, {Component} from 'react'
import {
StyleSheet,
View,
Text,
// Image,
ScrollView,
} from 'react-native'
import Image from '../components/Image'
export default class ImageDemo extends Component {
constructor(props) {
super(props);
this.state = {
y: 0
}
this._onScroll = this._onScroll.bind(this)
}
// 滑动触发
_onScroll(e) {
// 获取滑动的距离
let {y} = e.nativeEvent.contentOffset;
this.setState({
y
})
}
render() {
return (
<ScrollView
style = {styles.container}
onScroll = {this._onScroll}
>
<Text style = {[styles.text, styles.title]}>假设这是文章详情页，存在很多文字和图片</Text>
<Text style = {styles.text}>在我阅读的前端库、Python后台库的过程中，我们都是以造轮子为目的展开的。所以在最开始的时候，我需要一个可以工作，并且拥有我想要的功能的版本。</Text>
<Text style = {styles.text}>紧接着，我就可以开始去实践这个版本中的一些功能，并理解他们是怎么工作的。再用git大法展开之前修改的内容，可以使用IDE自带的Diff工具：</Text>
<Image
source = {{uri: 'https://pic4.zhimg.com/5bc23b15e827a033d2b4966b6038d987_b.jpg'}}
y = {this.state.y}
/>
<Text style = {styles.text}>或者类似于SourceTree这样的工具，来查看修改的内容。</Text>
<Text style = {styles.text}>在我们理解了基本的核心功能后，我们就可以向后查看大、中版本的更新内容了。</Text>
<Text style = {styles.text}>开始之前，我们希望大家对版本号管理有一些基本的认识。</Text>
<Text style = {styles.text}>我最早阅读的开始软件是Linux，而下面则是Linux的Release过程：</Text>
<Image
source = {{uri: 'https://pic3.zhimg.com/f9d7c5343f3da040f891149a8993ed7e_b.png'}}
y = {this.state.y}
/>
<Text style = {styles.text}>表格源自一本书叫《Linux内核0.11(0.95)完全注释》，简单地再介绍一下：</Text>
<Text style = {styles.text}>版本0.00是一个hello,world程序</Text>
<Text style = {styles.text}>版本0.01包含了可以工作的代码</Text>
<Text style = {styles.text}>版本0.11是基本可以正常的版本</Text>
<Text style = {styles.text}>1．项目初版本时，版本号可以为 0.1 或 0.1.0, 也可以为 1.0 或 1.0.0，如果你为人很低调，我想你会选择那个主版本号为 0 的方式；</Text>
<Image
source = {{uri: 'https://pic4.zhimg.com/6a32830fab3b9105fecef3d4f830afe7_b.png'}}
y = {this.state.y}
/>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingHorizontal: 10
},
text: {
fontSize: 16,
marginVertical: 10
},
title: {
fontSize: 20,
marginTop: 10
}
})
重点在_onScroll函数上，获取到每次滑动的内容偏移量 contentOffset.y，并通过 state 传递给 Image 组件。
<Image
source = {{uri: 'https://pic4.zhimg.com/5bc23b15e827a033d2b4966b6038d987_b.jpg'}}
y = {this.state.y}
/>
这样 Image 组件就能够知道自己是否出现在可视范围内了。
这里 Image 组件是一个封装后的组件：
// components/Image.js
import React, {Component} from 'react'
import {
StyleSheet,
View,
Image,
Text,
Dimensions,
InteractionManager
} from 'react-native'
// 获取屏幕宽高
const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height
export default class CustomImage extends Component {
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
alert(y)
this.setState({
offsetY: y
})
}
// 获取加载中、加载失败视图的函数
_renderLoad(text) {
return(
<View
style = {styles.loadContainer}
onLayout = {this._onLayout}
>
<Text
style = {styles.loadText}
>{text}</Text>
</View>
)
}
render() {
const {source} = this.props
if(this.state.loaded) {
// 如果真正的图片加载好
return <Image
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'
}
)
1、先加载 loading 视图。
2、获取到该 loading 视图在 ScrollView 容器内的位置，有用的是 loading 距内容顶部的距离 y。
OK，然后可以开始计算了，如果传过来的 y + 屏幕高度 >= loading 视图距内容顶部的距离 y，就可以获取远程图片了。
// components/Image.js
//...
// 从网络请求图片的方法
_fetchImg() {
InteractionManager.runAfterInteractions(() => {
const {source, style} = this.props
if(source.uri) {
// 如果是网络图片 在页面还未加载前，获取图片宽高
Image.getSize(source.uri, (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、判断是否可以加载图片了
if(y + screenHeight >= this.state.offsetY && !this.state.loaded) {
// 请求图片
this._fetchImg()
}
// 4、如果加载了远程图片，就会渲染这里
if(this.state.loaded) {
// 如果真正的图片加载好
return <Image
source = {source}
style = {{height: this.state.height}}
resizeMode = {'contain'}
/>
}
// 1、会先显示加载中视图
return this._renderLoad('正在加载中...')
}
lazyImg.gif
看起来还不错。。。
总结
至此，完成了一个最最最简单的图片懒加载组件。
当然还可以继续做一些优化，比如当网络不好时，加载图片显示加载失败，点击可以重新加载等等。
网友评论