ReactNative 基础 - 11 （FlatList组件，核心属性data、renderItem、keyExtractor，分割组件，头部组件，尾部组件）

FlatList组件支持下拉刷新、触底加载、回到顶部、头部、尾部组件、行分割组件等待

1、核心属性：

        data：需要显示的数组数据

        renderItem：数组每个元素对应的界面ui标签的样式（标签）

        keyExtractor：每个ui的唯一标识

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：尾部组件

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>
    );
  }
}