FlatList显示图片列表

需求：

加载网络图片，列表形式展示，并缓存
不显示的item不加载图片
正在加载的图片，取消加载（不显示情况下）

参考文档：
https://blog.csdn.net/sinat_17775997/article/details/65445606
文章中使用的是ListView，设置onChangeVisibleRows属性，进行界面中列表显示内容的监听。
测试结果：
onChangeVisibleRows 未触发（rn版本0.55.4）；
直接修改Row组件的prop，运行报错。

---

笔者的方案：

使用FlatList加载图片列表；
图片缓存：react-native-img-cache库中的CachedImage组件显示图片；
给FlatList设置onViewableItemsChanged属性，进行实现row变化的监听，实现不显示row不加载图片等功能。

FlatList的基本用法这里就不进行说明。主要介绍onViewableItemsChanged。

官方文档
翻译：当行的可见性发生变化时调用。
onViewableItemsChanged函数中的参数info，有两个属性:viewableItems、changed，类型都是array。info的数据格式及内容如下所示：

{ viewableItems: 
        [ 
            { index: 0, item: { name: 'a' }, key: '0', isViewable: true },
            { index: 1, item: { name: 'a1' }, key: '1', isViewable: true },
            { index: 2, item: { name: 'a2' }, key: '2', isViewable: true },
            { index: 3, item: { name: 'a3' }, key: '3', isViewable: true },
            { index: 4, item: { name: 'a4' }, key: '4', isViewable: true },
            { index: 5, item: { name: 'a5' }, key: '5', isViewable: true },
            { index: 6, item: { name: 'a6' }, key: '6', isViewable: true },
            { index: 7, item: { name: 'a7' }, key: '7', isViewable: true },
            { index: 8, item: { name: 'a8' }, key: '8', isViewable: true },
            { index: 9, item: { name: 'a9' }, key: '9', isViewable: true },
            { index: 10, item: { name: 'a10' }, key: '10', isViewable: true },
            { index: 11, item: { name: 'a11' }, key: '11', isViewable: true },
            { index: 12, item: { name: 'a12' }, key: '12', isViewable: true },
            { index: 13, item: { name: 'a13' }, key: '13', isViewable: true },
            { index: 14, item: { name: 'a14' }, key: '14', isViewable: true },
            { index: 15, item: { name: 'a15' }, key: '15', isViewable: true },
            { index: 16, item: { name: 'a16' }, key: '16', isViewable: true },
            { index: 17, item: { name: 'a17' }, key: '17', isViewable: true },
            { index: 18, item: { name: 'b' }, key: '18', isViewable: true },
            { index: 19, item: { name: 'b1' }, key: '19', isViewable: true },
            { index: 20, item: { name: 'b2' }, key: '20', isViewable: true } ],
    changed: 
        [ 
            { index: 10, item: { name: 'a10' }, key: '10', isViewable: true },
            { index: 11, item: { name: 'a11' }, key: '11', isViewable: true },
            { index: 12, item: { name: 'a12' }, key: '12', isViewable: true },
            { index: 13, item: { name: 'a13' }, key: '13', isViewable: true },
            { index: 14, item: { name: 'a14' }, key: '14', isViewable: true },
            { index: 15, item: { name: 'a15' }, key: '15', isViewable: true },
            { index: 16, item: { name: 'a16' }, key: '16', isViewable: true },
            { index: 17, item: { name: 'a17' }, key: '17', isViewable: true },
            { index: 18, item: { name: 'b' }, key: '18', isViewable: true },
            { index: 19, item: { name: 'b1' }, key: '19', isViewable: true },
            { index: 20, item: { name: 'b2' }, key: '20', isViewable: true } 
        ],
    viewabilityConfig: { viewAreaCoveragePercentThreshold: 0 } 
}

代码内容：
设置onViewableItemsChanged属性

let rows = {}; 
export default class ImageScreen extends Component {       
    render(){
        <FlatList
            data={this.data}
            renderItem={({ item,index }) => this._renderItem(item,index)}
            onViewableItemsChanged={this._onViewableItemsChanged}
        />
    }  
}

渲染row

    _renderItem(item, index) {
        console.log(item.name)
        console.log(index)
        return (
            <Row
                ref={el => {
                    let key = String(index)
                    rows[key] = el
                }}
                id={index}
                row={item}
            />
        )
    }

onViewableItemsChanged函数

    _onViewableItemsChanged(info) {
        info.changed.forEach((currentValue, index, arr) => {
            rows[currentValue.key].setVisible(currentValue.isViewable)
        })
    }

Row组件

export default class Row extends Component {

    constructor(props){
        super(props)
        this.state = {
            visible:false
        }
    }

    setVisible = (visible)=>{
        // this.props.visible = visible
        this.setState({visible:visible})
    }

    render() {
        const { row, id } = this.props;
        console.log('id=' + id, 'visible=' + this.state.visible)
        if(!this.state.visible){
            //取消网络图片的加载
            ImageCache.get().cancel(row.uri);
        }
        return (
            <View style={{height:60}}>
                {
                this.state.visible && <CachedImage source={{ uri: row.pictureURI }} />}
                }
            </View>
        )
    }

}