ListView问题:
FlatList是基于VirtualizedList的。
https://www.jianshu.com/p/47a2ad2bf527 FlatList属性详解
FlatList:注意第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证 用户执行返回顶部的操作时,不需要重新渲染首批元素。
initialNumToRender:number 指定一开始渲染的元素数量,最好刚刚够填满一个屏幕。
itemSeparatorComponent?:?ReactClass<any>行与行之间的分割线 组件。不会出现在第一行之前和最后一行之后。
ListFooterComponent?:?ReactClass<any>设置尾部组件。
ListHeaderComponent?:?ReactClass<any>设置头部组件。
extraData?:any 如果有除data以外的数据用在列表中(不论是用在 renderItem还是Header或者 Footer中),请在此属性中指定。此数据修改时需要先修改其引用地址,然后再修改其值,否则界面很可能不会刷新。
getItemLayout是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。
getItemLayout={(data,index)=>( {length:行高,offset:行高*index,index } )}
注意如果你指定了SeparatorComponent,请把分割线的尺寸也 考虑到offset的计算之中。
legacyImplementation?:?bollean 设置为true 则使用旧的ListView的实现。
numColumns:number 多列布局 只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。
检测用户滚动到底部的距离和需要执行的函数:
检测可见行元素变化时的配置和执行函数:
FlatList方法:
scrollToEnd(params?:object)
滚动到底部调用。如果 不设置getItemLayout属性的话,可能会比较卡。
scrollToIndex(params:object)
滚动到指定位置,如果不设置getItemLayout属性的话,可能会比较卡。
scrollToItem(params:object)
需要线性扫描数据——如果可能,请使用scrollToIndex。如果不设置getItemLayout属性的话 只能滚动到当前渲染窗口的某个位置。
scrollToOffset(params:object)
滚动到列表中特定内容像素偏移量。
recordInteraction()待定
实例:(不可直接使用)
import React from 'react'; import {Map, FlatList} from 'react-native'; class MyListItem extends React.PureComponent { _onPress = () => { this.props.onPressItem(this.props.id); }; render() { return <SomeOtherWidget {...this.props} onPress={this._onPress} />; } } class MyList extends React.PureComponent { state = {selected: new Map()}; _keyExtractor = (item, index) => item.id; _onPressItem = id => { this.setState(state => { const selected = new Map(state.selected); selected.set(id, !selected.get(id)); return {selected}; }); }; _renderItem = ({item}) => ( <MyListItem id={item.id} onPressItem={this._onPressItem} selected={!!this.state.selected.get(item.id)} title={item.title} /> ); render() { return ( <FlatList data={this.props.data} extraData={this.state} keyExtractor={this._keyExtractor} renderItem={this._renderItem} /> ); } }
解析:
组件继承自PureComponent而非通常的Component,这意味着如果其props在浅比较中是相等的,则不会重新渲染。
对于MyListItem组件来说,其 onPressItem属性使用箭头函数 而非bind的方式进行绑定,使其不会在每次列表重新render时生成一个新的函数,从而保证了props的不变性(当然前提是id、selected和title也没变),不会触发自身无畏的重新render。
给 FlatList指定extraData={this.state}属性,是为了保证state.selected变化时,能够正确触发FlatList的更新。如果不指定此属性,则FlatList不会触发更新,因为它是一个pureComponent,其props在===比较中没有变化则不会触发更新。