FlatList的使用
- 高性能的簡(jiǎn)單列表組件，支持下面這些常用的功能：
- 完全跨平臺(tái)。
- 支持水平布局模式。
- 行組件顯示或隱藏時(shí)可配置回調(diào)事件。
- 支持單獨(dú)的頭部組件。
- 支持單獨(dú)的尾部組件。
- 支持自定義行間分隔線。
- 支持下拉刷新。
- 支持上拉加載。
- 支持跳轉(zhuǎn)到指定行（ScrollToIndex）。
如果需要分組/類/區(qū)（section），請(qǐng)使用<SectionList>
。
建議以后盡量少使用ListView，畢竟性能不如FlatList
使用方便簡(jiǎn)單，如下：
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>
)
}
//此函數(shù)用于為給定的item生成一個(gè)不重復(fù)的key
_keyExtractor = (item, index) => item.key;
componentDidMount() {
}
//列表的頭部
ListHeaderComponent() {
return (
<DetailsHeadItem titleName='學(xué)習(xí)' unitName='111'/>
)
}
//列表的每一行
renderItem({item,index}) {
return (
<TouchableOpacity key={index} activeOpacity={1} onPress={this.clickItem.bind(this,item,index)}>
<DetaileRowItem />
</TouchableOpacity>
)
}
//繪制列表的分割線
renderItemSeparator(){
}
//點(diǎn)擊列表點(diǎn)擊每一行
clickItem(item,index) {
alert(index)
}
}
export default DetailePage
