简单的react-naitve图片懒加载

类似知乎或者微信,在文章详情页面,图片并非是一次性加载完成,而是在滑动到快看到图片时才开始加载,很明显原生 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

看起来还不错。。。

总结

至此,完成了一个最最最简单的图片懒加载组件。
当然还可以继续做一些优化,比如当网络不好时,加载图片显示加载失败,点击可以重新加载等等。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 160,067评论 24 690
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,608评论 4 42
  • 校验工具类 最近总结了一下在iOS开发中用到校验工具类,包含[网址验证]、[邮箱验证]、[身份证验证]、[手机号 ...
    Anticipate_91阅读 267评论 0 5
  • 有一个地方, 秋叶随风, 恰悲凉, 那里有一生的思念, 诉说的再见。 有一个地方, 徘徊谧声, 多思量, 那里有欢...
    笔易景悲阅读 158评论 4 2