React Native中开始是ListView,对于下拉、上拉刷新加载等功能，需要额外的添加，ListView被放弃，现在使用FlatListt或是SectionList
FlatList
用于显示一个垂直的滚动列表，其中样式相同仅数据不同
更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，
FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素
-
组件必须的两个属性是data和renderItem。
- data是列表的数据源
- renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染
{item.key} }
/>
- FlatList支持以下功能
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行（ScrollToIndex）
FlatList相关属性
ItemSeparatorComponent
行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后ListEmptyComponent
列表为空时渲染该组件。可以是React Component, 也可以是一个render函数， 或者渲染好的elementListFooterComponent
尾部组件ListHeaderComponent
头部组件columnWrapperStyle
如果设置了多列布局（即将numColumns值设为大于1的整数），则可以额外指定此样式作用在每行容器上data
data属性目前只支持普通数组。如果需要使用其他特殊数据结构，例如immutable数组，请直接使用更底层的VirtualizedList组件extraData
如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新getItem
获取每个ItemgetItemCount
获取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 (
this.showCell(index, item)}
//默认情况下每行都需要提供一个不重复的key属性
keyExtractor={(item, index) => (index)}
/>
);
}
showCell(index, item) {
return (
//添加手势
{ AlertIOS.alert('点击了' + index + '行') }}>
{item.name}
¥{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 (
this.showCell(index, item)}
//默认情况下每行都需要提供一个不重复的key属性
keyExtractor={(item, index) => (index)}
//设置垂直布局（）
horizontal={false}
//设置水平的排列的个数（只有垂直布局才起作用）
numColumns={4}
/>
);
}
showCell(index, item) {
return (
//添加手势
{ AlertIOS.alert('第' + index + '个') }}>
{item.title}
)
}
}
const styles = StyleSheet.create({
cellViewStyle: {
width: cellH,
height: cellH,
marginLeft: vMargin,
marginTop: HMargin,
alignItems: 'center',
},
})