关于FlatList的使用
要使用必须要先引入FlatList
import { FlatList } from 'react-native';
复制代码ListHeaderComponent属性,
用来定义头部组件
ListHeaderComponent={()=> this._createListHeader()}
_createListHeader(){
return (
<View style={styles.headView}>
<Text style={{color: 'white'}}>
头部布局
</Text>
</View>
)
}
复制代码ListFooterComponent属性
用来定义尾部
ListFooterComponent = {()=> this._createListFooter()}
_createListFooter(){
return(
<View style="style.indicatorContainer">
{ this.state.showFoot === 1
&&
<ActivityIndicator
style={styles.indicator}
size = 'small'
animating = {true}
color = 'red'
/>
}
<Text>{this.state.showFoot === 1?'正在加载更多数据...':'没有更多数据'}</Text>
</View>
)
}
复制代码ItemSeparatorComponent属性
用来定义分割线
ItemSeparatorComponent = {()=>this._createSeparatorComponent()}
_createSeparatorComponent(){
return(
<View style={{height: 5, backgroundColor: '#eeeeee'}}/>
)
}
复制代码ListEmptyComponent属性
为FlatList设置一个没有数据时候的展示的视图
设置item的key值
必须要为item设置key属性，否则会有一个黄色的警告弹出。而且我们需要注意的是这里每一个item的key是唯一的！
keyExtractor={this._keyExtractor}
_keyExtractor(item, index){
return `index${index}`
}
复制代码- itemLayout
属性是一个可选的优化，用于避免动态测量内容尺寸的开销。如果我们知道item的高度，就可以为FlatList指定这一个属性，来使FlatList更加高效的运行！
//200为item的高度,5为分割线的高度
getItemLayout={(data, index) => ({
length:200, offset: (200 + 5) * index, index
})}
复制代码下拉刷新
FlatList中有两个属性，可以用来设置下拉刷新。
- refreshing在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号.
- onRefresh如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
//不需要自定义样式的时候
/*refreshing = { this.state.is_Loading }
onRefresh = {()=>{
this.loadData();
}}*/
//修改loading样式
refreshControl = {
<RefreshControl
title = {'loading'}
colors = {['red']}//android
tintColor = {'red'}//ios
refreshing = { this.state.is_Loading }
onRefresh = {()=>{
this._onRefresh();
}}
/>
}
_onRefresh(){
...
//下拉刷新的方法
}
复制代码上拉加载
上拉加载，FlatList封装两个属性来实现：
- onEndReachedThreshold：这个属性决定当距离内容最底部还有多远时触发onEndReached回调。需要注意的是此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。所以它的取值范围为：(0,1)，不包含0和1。
- onEndReached：列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
onEndReached ={()=>{
this._onLoadMore();
}}
onEndReachedThreshold={0.1}
复制代码隐藏滑动指示条
- 设置滑动为横向
horizontal={true}
复制代码- 隐藏垂直滚动条
showsVerticalScrollIndicator={false}
复制代码- 隐藏水平滚动条
showsHorizontalScrollIndicator={false}
复制代码常用函数
- scrollToEnd 滚动条到底部
1. 需要为FlatList设置ref属性绑定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2. 调用
_toEnd(){
this._flatList.scrollToEnd();
}
复制代码- scrollToIndex 滚动到指定index位置
1. 需要为FlatList设置ref属性绑定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2. 调用
_toItem(){
//viewPosition参数：0表示顶部，0.5表示中部，1表示底部
this._flatList.scrollToIndex({viewPosition: 0, index: this.state.index});
}
复制代码关于SwipeableFlatList 的使用
支持FlatList的所有的属性和方法,另外新增3个自有属性.
- bounceFirstRowOnMount：Boolean
默认是true,表示第一次是否先滑一下FlatList的Item
- maxSwipeDistance
必须要赋值，表示向左滑动的最大距离
- renderQuickActions：func
必须要赋值，表示滑动显示的内容。
<SwipeableFlatList
renderQuickActions={()=>this.genQuickAction()}
maxSwipeDistance={50}
bounceFirstRowOnMount={false}/>
//渲染
genQuickAction(){
return <View style={styles.quickContiner}>
<TouchableHighlight>
<View>
<Text
style={styles.delText}
onPress={()=>{
alert("您确定要删除吗？")
}}>删除</Text>
</View>
</TouchableHighlight>
</View>
}
复制代码关于SectionList 的使用
- 完全跨平台
- 支持水平布局模式
- 行组件显示或隐藏时可配置回调事件
- 支持单独的头部组件
- 支持单独的尾部组件
- 支持自定义行间分隔线
- 支持下拉刷新
- 支持上拉加载
<SectionList
sections={this.state.CITY_NAMES}//需要绑定的数据
renderItem={(data) => this._renderItem(data)}
ItemSeparatorComponent = {()=>this._createSeparatorComponent()}
keyExtractor={this._keyExtractor}
renderSectionHeader={(data)=>this._renderSectionHeader(data)}//分组的头部
refreshControl = {
<RefreshControl
title={'loading'}
colors={['red']}
refreshing= { this.state.is_Loading }
onRefresh={() => this._onRefresh()}
/>
}
/>
复制代码