RN 列表组件之三 FlatList
如果需要分组/类/区,就使用SectionLIst;基于VirtualizedList 组件的封装
@FlatList 组件的属性
<FlatList
ref = 'flatList' // this.refs.flatList 获取到该组件
data = {[{name: '小米'},{name: '小兵'}]} // 列表的数据源,可以this.state.data
ListHeaderComponent = {this._listHeaderComponent.bind(this)}//渲染头部组件
ListEmptyComponent = {this._listEmptyComponent.bind(this)} //列表为空时渲染
initialNumToRender = {6} //首屏渲染的数据量,不会在滑动中被卸载
renderItem = {this._renderItem.bind(this)} //渲染列表数据
keyExtractor= {(itemT, index) => index;} //每行不一样的key
ItemSeparaterComponent = {() => <View style={{height:6}} /> //行分隔线,首行前和尾行后无分隔
columnWrapperStyle = {{borderWidth: 2}} //行数>1时,可额外设置行样式
horizontal = {false} //默认是垂直布局
ListFooterComponent = {this._listFooterComponent.bind(this)} //渲染底部组件
refreshing = {true} // 等待加载出现加载的符号
onRefresh = {this._onRefresh.bind(this)} //上拉刷新
onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
onEndReached = {this._endReached.bind(this)} //上拉加载数据
/>
_onRefresh(){
let that=this;
// 页面渲染之后在加载结束周期重新加载
that.componentDidMount();
}
_endReached(){
let that=this
// 判断首屏满屏的情况
if(that.state.data && that.state.length < parseInt(that.state.totalCount)){
that.state.currentPage++;
}else{
//若总数未满一屏,进去就提示
alert('已加载完成')
}
}
_listHeaderComponent(){
return (
<View>
<Text>也可以是一组图片的渲染</Text>
</View>
)
}
_listEmptyComponent(){
return (
<View>
<Text>暂无数据</Text>
</View>
)
}
_renderItem(item){
return (
<TouchableHighlight
style = {{color: '#333'}}
activeOpacity = {0.5} //触摸激活时的不透明度
onHindUnderlay = {() => {}} //底层颜色被隐藏时调用
onShowUnderlay = {() => {}} //底层颜色显示的时候调用
underlayColor = {'red'} //触摸操作底层的颜色
onPress = {() => {}} //可以绑定事件
> // 触摸视图,只能包含一个子节点
<View><Text>{item.name}</Text></View>
</TouchableHighlight>
)
}
_listFooterComponent(){
return (
<View>
<Text>列表底部的布局</Text>
</View>
)
}