ReactNative中FlatList(ListView已过期)组件

React Native中开始是ListView,对于下拉、上拉刷新加载等功能，需要额外的添加，ListView被放弃，现在使用FlatListt或是SectionList

FlatList

• 用于显示一个垂直的滚动列表，其中样式相同仅数据不同
• 更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素

• 组件必须的两个属性是data和renderItem。

  • data是列表的数据源
  • renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染

  <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}Text>}
  />

• FlatList支持以下功能
  
  • 完全跨平台。
  • 支持水平布局模式。
  • 行组件显示或隐藏时可配置回调事件。
  • 支持单独的头部组件。
  • 支持单独的尾部组件。
  • 支持自定义行间分隔线。
  • 支持下拉刷新。
  • 支持上拉加载。
  • 支持跳转到指定行（ScrollToIndex）

FlatList相关属性

• ItemSeparatorComponent
  行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

• ListEmptyComponent
  列表为空时渲染该组件。可以是React Component, 也可以是一个render函数， 或者渲染好的element

• ListFooterComponent
  尾部组件

• ListHeaderComponent
  头部组件

• columnWrapperStyle
  如果设置了多列布局（即将numColumns值设为大于1的整数），则可以额外指定此样式作用在每行容器上

• data
  data属性目前只支持普通数组。如果需要使用其他特殊数据结构，例如immutable数组，请直接使用更底层的VirtualizedList组件

• extraData
  如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新

• getItem
  获取每个Item

• getItemCount
  获取Item属相

• horizontal
  设置为true则变为水平布局模式。

• initialNumToRender
  指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。

• initialScrollIndex
  开始时屏幕顶端的元素是列表中的第 initialScrollIndex 个元素, 而不是第一个元素。设置这个属性会关闭对“滚动到顶端”这个动作的优化（参见VirtualizedList 的 initialNumToRender 属性)。位于 initialScrollIndex 位置的元素总是会被立刻渲染。需要先设置 getItemLayout 属性。

• keyExtractor
  此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。

• legacyImplementation
  设置为true则使用旧的ListView的实现。

• numColumns
  多列布局只能在非水平模式下使用，即必须是horizontal={false}
  。此时组件内元素会从左到右从上到下按Z字形排列，类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。

• onEndReached
  当列表被滚动到距离内容最底部不足onEndReachedThreshold
  的距离时调用。

• onEndReachedThreshold
  决定当距离内容最底部还有多远时触发onEndReached
  回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。

• onRefresh
  如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

• onViewableItemsChanged
  在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性

• refreshing
  在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号

• renderItem: (info: {item: ItemT, index: number})
  根据行数据data，渲染每一行的组件

FlatList方法

• scrollToEnd
  滚动到底部。如果不设置getItemLayout属性的话，可能会比较卡。

• scrollToIndex
  将位于指定位置的元素滚动到可视区的指定位置，当 viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。如果不设置getItemLayout属性的话，无法跳转到当前可视区域以外的位置。

• scrollToItem
  这个方法会顺序遍历元素。尽可能使用 scrollToIndex 。 如果不设置getItemLayout属性的话，可能会比较卡

• scrollToOffset
  滚动列表到指定的偏移（以像素为单位），等同于 ScrollView 的 scrollTo 方法。

• recordInteraction()
  主动通知列表发生了一个事件，以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时，就可以调用这个方法。不过一般来说，当用户点击了一个列表项，或发生了一个导航动作时，我们就可以调用这个方法。

• flashScrollIndicators()
  短暂地显示滚动指示器。

先关的一些效果

效果参考链接（ES5的写法）

第一个效果

import React, {Component} from 'react';

import {
  FlatList,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  AlertIOS,
} from 'react-native';

//首先要导入Dimensions包
var Diemnsions = require('Dimensions');
var width = Diemnsions.get('window').width;
//获取数据
var wineData = require('./Wine.json');

export default class App7 extends Component {
  render() {
    return (
      //加载数据源
        data={wineData}
        //展示数据
        renderItem={({ index, item }) => this.showCell(index, item)}
        //默认情况下每行都需要提供一个不重复的key属性
        keyExtractor={(item, index) => (index)}
      />
    );
  }
  showCell(index, item) {
    return (
      //添加手势
      0.5} onPress={() => { AlertIOS.alert('点击了' + index + '行') }}>
        
          10,width: 60,height: 60}} source={{ url: item.image }} />
          'center'}}>
            {item.name}
            'blue'}}>¥{item.money}
          
        
      
    )
  }
}

const styles = StyleSheet.create({
  cellViewStyle: {
    marginTop: 25,
    borderBottomWidth: 0.5,
    borderBottomColor: '#e8e8e8',
    flexDirection: 'row',
  },
  topTextStyle: {
    color: 'red',
    fontSize: 15,
    width: width * 0.7,
    marginBottom: 8,
  },
})

---

第二个效果

import React, {Component} from 'react';
import {
    FlatList,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    AlertIOS,
} from 'react-native';

//首先要导入Dimensions包
var Diemnsions = require('Dimensions');
var width = Diemnsions.get('window').width;

//获取数据
var shareData = require('./shareData.json').data;

var cols = 3;
var cellH = 100;
var vMargin = (width - cellH * cols) / (cols + 1);
var HMargin = 25;

export default class App8 extends Component {
    render() {
        return (
            //加载数据源
                data={shareData}
                //展示数据
                renderItem={({ index, item }) => this.showCell(index, item)}
                //默认情况下每行都需要提供一个不重复的key属性
                keyExtractor={(item, index) => (index)}
                //设置垂直布局（）
                horizontal={false}
                //设置水平的排列的个数（只有垂直布局才起作用）
                numColumns={4}
            />
        );
    }
    showCell(index, item) {
        return (
            //添加手势
            0.5} onPress={() => { AlertIOS.alert('第' + index + '个') }}>
                
                    80, height: 80 }} />
                    {item.title}
                
            
        )
    }
}
const styles = StyleSheet.create({
    cellViewStyle: {
        width: cellH,
        height: cellH,
        marginLeft: vMargin,
        marginTop: HMargin,
        alignItems: 'center',
    },
})