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
