ReactNative⼊门（七）之列表组件的使⽤（2）关于FlatList的⼀切
前⾔
在上⼀篇博客中了解了列表组件的相关内容，主要是静态的展⽰了⼀个列表数据，了解了ScrollVIew，FlatList和SectionList的基本⽤法，本篇⽂章就深⼊的了解⼀个常⽤的⼀个列表组件FlatList的⽤法！
属性
添加头部组件
ListHeaderComponent属性⽤来给FlatList添加头部组件
简单使⽤：
//ES6之前写法
_header = function() {
return (
<Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text>
);
}
<FlatList
ListHeaderComponent={this._header}//header头部组件
/>
添加尾部组件
ListFooterComponent属性为FlatList添加尾部组件，接收的参数跟ListHeaderComponent相同。
//ES6的写法
_footer = () => (
<Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦，没有啦！</Text>
)
<FlatList
ListFooterComponent={this._footer} //添加尾部组件
/>
添加头部和尾部组件⽐较简单，需要注意的就是上边两者ES5和6写法的区别！
添加分割线
ItemSeparatorComponent属性可以为FlatList列表之间添加分割线。
举个例⼦:
class ItemDivideComponent extends Component {
fontweight属性boldrender() {
return (
<View style={{height: 1, backgroundColor: 'skyblue'}}/>
)
;
}
};
<FlatList
ItemSeparatorComponent={ItemDivideComponent}//分割线组件
/>
这⾥我们⾃定义了⼀个组件来设置分割线，当然我们像添加头部和尾部⼀样，在内部声明之后使⽤this._header的写法也是可以的！
设置空数据视图
ListEmptyComponent属性，可以为FlatList设置⼀个没有数据的时候展⽰的视图！，这个属性可以接收的参数类型⽐较多，可以是React Component，也可以是⼀个render函数，或者渲染好的element。
所以设置空数据视图不仅可以像前边介绍的两种⽅式以外，还可以接收⼀个render函数。
举个例⼦：
createEmptyView() {
return (
<Text style={{fontSize: 40, alignSelf: 'center'}}>还没有数据哦！</Text>
);
}
<FlatList
ListEmptyComponent={ateEmptyView()}
/>
设置item的key
在前⼀篇博客中，我们的设置data的时候，是这样的：
data={[
{key: '⼤护法'},
{key: '绣春⼑II：修罗战场'},
...
]}
类似{key：你的数据value}这样的形式，是因为我们在设置data的时候，必须要为item设置key属性，否则会有⼀个黄⾊的警告弹出。⽽且我们需要注意的是这⾥每⼀个item的key是唯⼀的！，如果按照这样的写法，我们在数据中有重复的，⽐如{key: '⼤护法'},{key: '⼤护法'}，这⾥的⼤护法只会显⽰⼀个，因为FlatList会认为这是⼀条数据，因为key相同！
那么为什么会这样？
因为FlatList中有⼀个属性：keyExtractor，⽤于为给定的item⽣成⼀个不重复的key。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使⽤数组下标index。因为前边没有指定该属性，所以就把item.key作为了key值，才会认定两个重复的数据是⼀条数据！
那么⼀般地，我们可以这样使⽤：
_keyExtractor = (item, index) => index;
<FlatList
keyExtractor={this._keyExtractor}
/>
这样就把data中数组的下标作为了唯⼀的key。
那么在data中指定数据的时候，就不⽤{key: '⼤护法'}这样写了，因为我们已经指定了唯⼀的key，⽽可以随意写{name: '⼤护法'}或者{movie: '⼤护法'}，在渲染item的时候，取值⽤item.name或者vie即可！也不会有黄⾊的警告出现！
你明⽩了吗？
设置itemLayout
getItemLayout属性是⼀个可选的优化，⽤于避免动态测量内容尺⼨的开销。如果我们知道item的⾼度，
就可以为FlatList指定这⼀个属性，来使FlatList更加⾼效的运⾏！
举个例⼦：
getItemLayout={(data, index) => ({
length: 44, offset: (44 + 1) * index, index
})}
我们在上边使⽤的时候指定了item的⾼度为44，所以length参数为44；我们设置了分割线，且指定分割线的⾼度是1，所以offset参数为44+1。综合来看，设置这个属性应这样写：
getItemLayout={(data, index) => ({
length: 你的item的height, offset: (你的item的height + ItemSeparator的height) * index, index
})}
设置这⼀属性，在调⽤FlatList的跳转函数的时候⾮常有⽤，否则可能会很卡顿！如scrollToEnd(),scrollToIndex()，这两个⽅法后边再说！下拉刷新
FlatList中有两个属性，可以⽤来设置下拉刷新。
refreshing在等待加载新数据时将此属性设为true，列表就会显⽰出⼀个正在加载的符号.
onRefresh如果设置了此选项，则会在列表头部添加⼀个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
这⾥的RefreshControl控件，⾮常类似于Android v4包中的SwipeRefreshLayout，这⾥就不多说了，需要了解的可以查看相关⽂档！
如何使⽤，举个例⼦：
refreshing={freshing}
onRefresh={() => {
this.setState({refreshing: true})//开始刷新
//这⾥模拟请求⽹络，拿到数据，3s后停⽌刷新
setTimeout(() => {
alert('没有可刷新的内容！');
this.setState({refreshing: false});//停⽌刷新
}, 3000);
}}
上拉加载
关于上拉加载，FlatList也封装有两个属性来实现：
onEndReachedThreshold：这个属性决定当距离内容最底部还有多远时触发onEndReached回调。需要注意的是此参数是⼀个⽐值⽽⾮像素单位。⽐如，0.5表⽰距离内容最底部的距离为当前列表可见长度的⼀半时触发。所以它的取值范围为：(0,1)，不包含0和1。
onEndReached：列表被滚动到距离内容最底部不⾜onEndReachedThreshold设置的的距离时调⽤。
具体使⽤，举个例⼦：
onEndReachedThreshold={0.1}
onEndReached={({distanceFromEnd}) => (
setTimeout(() => {
this.setState((state) => ({
data: at(this._newData),
}));
}, 3000)
)}
这⾥我们设置的距离为列表可见长度的1/10，⽽触发了onEndReached函数时，我们设置了⼀个定时器，3s后，将data中的数据添加了新数据，从⽽达到上拉加载更多的效果！
2018.5.22更新：
隐藏滑动指⽰条
//隐藏垂直状态条
showsVerticalScrollIndicator={false}
//如果设置为横向
horizontal={true}
//隐藏⽔平状态条
showsHorizontalScrollIndicator={false}
函数
介绍
FlatList下有两个⽐较常⽤的函数：
scrollToEnd() 滚动到底部。如果不设置getItemLayout属性的话，可能会⽐较卡。
scrollToIndex()如果不设置getItemLayout属性的话，⽆法跳转到当前可视区域以外的位置。
如官⽅所⾔，使⽤这两个函数的时候，最好指定设置getItemLayout属性。
使⽤
因为这两个是FlatList组件的函数，所以在使⽤这两个函数之前，⾸先我们要得到FlatList组件的引⽤。
这时候就需要ref属性。React提供的这个ref属性，表⽰为对组件真正实例的引⽤。
关于ref属性的使⽤，可以去React官⽹查看API！
具体的使⽤：
ref={(flatList) =>this._flatList = flatList}
this._flatList.scrollToEnd();
//viewPosition参数：0表⽰顶部，0.5表⽰中部，1表⽰底部
this._flatList.scrollToIndex({viewPosition: 0, index: });
⾄此，关于FlatList进阶的相关基础内容就说完了！
2017/11/7更新：
在使⽤横向列表的时候，也就是设置horizontal={true}的时候，然后添加分割线ItemSeparatorComponent，会出现问题，就是显⽰位置错误，我提过问题，也在Github上提了⼀个issue，在最新的v0.50版本修复了这个问题！
完整的Demo
下⾯看⼀下完整的demo：
源码：
class FlatListTest extends Component {
constructor(props) {
super(props);
this.state = {
data: this._sourceData,
refreshing: false, //初始化不刷新
text: ''//跳转的⾏
};
}
_header = function () {
return (
<Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text>
);
}
_footer = () => (
<Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦，没有啦！</Text>
)
createEmptyView() {
return (
<Text style={{fontSize: 40, alignSelf: 'center'}}>还没有数据哦！</Text>
);
}
//此函数⽤于为给定的item⽣成⼀个不重复的key
//若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使⽤数组下标index。
_keyExtractor = (item, index) => index;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。