React Native FlatList的使用

FlatList的使用

高性能的简单列表组件，支持下面这些常用的功能：
完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。

如果需要分组/类/区（section），请使用<SectionList> 。

建议以后尽量少使用ListView，毕竟性能不如FlatList

使用方便简单，如下：

import React, { Component } from 'react'
import {
View,
Image,
Dimensions,
ScrollView,
Text,
StyleSheet,
TouchableOpacity,
Button,
FlatList,
ActivityIndicator,
RefreshControl,
}from 'react-native'

var flatListData = [{
key: 'a',
text: '444'
},{
key: 'b',
text: '333'
},{
key: 'c',
text: '2222'
},{
key: 'd',
text: '111'
}];

class DetailePageextends Component {

constructor(props) {
super(props);

this.state = {

};
}

render() {
const { params } = this.props.navigation.state;
return (

<View style={styles.container}>

<FlatList
style={styles.flatListStyle}
data={flatListData}
ListHeaderComponent={this.ListHeaderComponent.bind(this)}
renderItem={this.renderItem.bind(this)}
keyExtractor={this._keyExtractor}
refreshControl={
<RefreshControl
refreshing={false}
/>
}
/>
</View>

)
}

//此函数用于为给定的item生成一个不重复的key
_keyExtractor = (item, index) => item.key;

componentDidMount() {

}

//列表的头部
ListHeaderComponent() {
return (
<DetailsHeadItem titleName='学习' unitName='111'/>
)
}

//列表的每一行
renderItem({item,index}) {
return (
<TouchableOpacity key={index} activeOpacity={1} onPress={this.clickItem.bind(this,item,index)}>
<DetaileRowItem  />
</TouchableOpacity>
)
}
//绘制列表的分割线
renderItemSeparator(){

}

//点击列表点击每一行
clickItem(item,index) {
alert(index)
}

}

export default DetailePage