FlatList组件支持下拉刷新、触底加载、回到顶部、头部、尾部组件、行分割组件等待
1、核心属性:
data:需要显示的数组数据
renderItem:数组每个元素对应的界面ui标签的样式(标签)
keyExtractor:每个ui的唯一标识
javascript">export default class App extends Component {
skills = ['vue','react','angluar','jquery','uni-app'];
//拼接ui标签,{index, item}解构传入的数据
_renderItem = ({index, item}) => (
<Text>{index} - {item}</Text>
);
//不解构,是这样的写法:
_renderItem1 = data => {
const {index, item} = data;
return (
<Text>{index} - {item}</Text>
);
};
render() {
return (
<FlatList
data={this.skills}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}>
</FlatList>
);
}
}
2、可选属性:
ItemSeparatorComponent:分割组件(每个list的分割,通常可以用来写分割线)
ListHeaderComponent:头部组件
ListFooterComponent:尾部组件
javascript">import React, {Component} from 'react';
import {FlatList, Text, View} from 'react-native';
export default class App extends Component {
heros = [
{name: '安安', job: '老师', price: 999},
{name: '啵啵', job: '学生', price: 1001},
{name: '瞅瞅', job: '搬砖', price: 899},
{name: '嘟嘟', job: '养猪', price: 666},
{name: '娥娥', job: '和水泥', price: 555},
];
_renderItem = ({item, index}) => (
<Text
style={{
fontSize: 26,
padding: 5,
}}>
{index + 1}、{item.name} - {item.job} - ¥{item.price}
</Text>
);
//分割线
_ItemSeparatorComponent = () => (
<View
style={{
height: 10,
borderBottomWidth: 1,
borderBottomColor: 'gray',
}}></View>
);
//头部
_ListHeaderComponent = () => (
<Text style={{fontSize: 30, color: 'red', textAlign: 'center'}}>
本局英雄阵容:
</Text>
);
//尾部
_ListFooterComponent = () => (
<Text style={{fontSize: 26, color: 'blue'}}>本场5个英雄</Text>
);
render() {
return (
<FlatList
data={this.heros}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this._ItemSeparatorComponent}
ListHeaderComponent={this._ListHeaderComponent}
ListFooterComponent={this._ListFooterComponent}></FlatList>
);
}
}