🤔🤔🤔
跟 sectionlist 一样，都是用来展示数据的组件（通过列表）。但是跟 sectionlist 的区别在于 flatlist 是不支持分组的。
高性能的简单列表组件，支持下面这些常用的功能：
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行（ScrollToIndex）。
- 支持多列布局。
官网示例代码（修改了数据）
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: '1',
title: '新闻',
},
{
id: '2',
title: '财经',
},
{
id: '3',
title: '体育',
},
{
id: '4',
title: '科技',
},
{
id: '5',
title: '娱乐',
},
{
id: '6',
title: '教育',
},
{
id: '7',
title: '宠物',
},
{
id: '8',
title: '电子',
},
];
const Item = ({ title }) => {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
}
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
展示
水平布局模式
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
horizontal={true} //水平布局模式
/>
</SafeAreaView>
horizontal={true} //水平布局模式
多列展示
//多列展示
numColumns={3}
懒惰加载
//懒惰加载
initialNumToRender={4}
指定列数，数据必须登高，无法支持瀑布流
初始化默认索引
//初始化默认索引
initialScrollIndex={0}
列表反转
//列表反转
inverted={true}
