React Native 经常使用三种列表渲染组件FlatList(普通),SwipeableFlatList(侧滑删除),sectionList(分组)

关于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()}
    	/>
    }
/>
复制代码

DEMO