React Native rendering a list of commonly used three kinds of components FlatList (general), SwipeableFlatList (sliding deleted), sectionList (group) ...

About FlatList of use

To use must first introduced FlatList

import { FlatList } from 'react-native';
复制代码

ListHeaderComponent property,

Used to define the head assembly

ListHeaderComponent={()=> this._createListHeader()}

_createListHeader(){
	return (
        <View style={styles.headView}>
            <Text style={{color: 'white'}}>
                头部布局
            </Text>
        </View>
    )
}
复制代码

ListFooterComponent property

Used to define the tail

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 property

Used to define the dividing line

ItemSeparatorComponent = {()=>this._createSeparatorComponent()}

_createSeparatorComponent(){
	return(
		<View style={{height: 5, backgroundColor: '#eeeeee'}}/>
	)
}
复制代码

ListEmptyComponent property

There is no data to FlatList set up a time to show the view

Set the key value of item

You must set the key attribute item, or there will be a yellow warning pops up. And we need to note here is the key of each item is unique!

keyExtractor={this._keyExtractor}

_keyExtractor(item, index){
	return `index${index}`
}
复制代码

• itemlayout

Attribute is an optional optimization, dynamic measurement contents for avoiding the overhead dimension. If we know the height of the item, you can specify that a property that FlatList to make FlatList more efficient operation!

//200为item的高度,5为分割线的高度
getItemLayout={(data, index) => ({
  length:200, offset: (200 + 5) * index, index
})}
复制代码

Pull down to refresh

FlatList There are two attributes can be used to set the drop-down refresh.

• refreshing this property to true while waiting for new data is loaded, the list will show a symbol being loaded.
• onRefresh If this option is set, the list will add a standard RefreshControl control head, in order to achieve "pull down to refresh" feature. At the same time you need to set refreshing property correctly.

//不需要自定义样式的时候
/*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(){
	...
	//下拉刷新的方法
}
复制代码

Raja uploaded on

The LAC carrier, FlatList package to achieve two properties:

• onEndReachedThreshold: This property determines when the contents how far from the bottom when the trigger onEndReached callback. Note that this parameter is a ratio, not pixels. For example, 0.5 represents half the trigger current listing visible length distance from the very bottom of the contents. It ranges: (0,1), excluding 0 and 1.
• onEndReached: Scroll to the list is called when the contents of the distance from the bottom of the set onEndReachedThreshold inadequate.

onEndReached ={()=>{
	this._onLoadMore();
}}
onEndReachedThreshold={0.1}
复制代码

Hidden sliding bar

• Arranged to slide transversely

horizontal={true}
复制代码

• Hide the vertical scroll bar

showsVerticalScrollIndicator={false}
复制代码

• Hidden horizontal scroll bar

showsHorizontalScrollIndicator={false}
复制代码

Common Functions

• scrollToEnd scroll bar in the end section

1. 需要为FlatList设置ref属性绑定flatList
<FlatList ref={(flatList) => this._flatList = flatList}/>
2.	调用
_toEnd(){
	this._flatList.scrollToEnd();
}
复制代码

• scrollToIndex scroll to the specified index position

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});
}
复制代码

About SwipeableFlatList of use

All the properties and methods of support FlatList, another new three-owned property.

• bounceFirstRowOnMount：Boolean

The default is true, meaning the first time whether the first slide of about Item FlatList

• maxSwipeDistance

Must be assigned, slide to the left represents the maximum distance

• renderQuickActions：func

It must be assigned to indicate the content of the slide show.

<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>
}
复制代码

About SectionList of use

• Completely cross-platform
• Support horizontal layout mode
• Configurable callback when the line components show or hide
• Supports separate head assembly
• Support separate tail assembly
• Support self-defined line between the separation line
• Support drop-down refresh
• Raja load on support

<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