React Native FlatList

摘要: 在本教程中，您将学习如何使用 React Native FlatList 组件来高效地渲染项目列表。

React Native FlatList 组件介绍

ScrollView 组件一次性渲染所有嵌套组件，即使其中一些组件在屏幕上不可见。当您有大量嵌套组件时，这将非常低效。

为了高效地渲染大型列表，您可以使用FlatList 组件。FlatList 组件懒加载嵌套组件，因为它们出现在屏幕上。

此外，FlatList 组件支持许多有用的功能。

• 以水平或垂直方式显示列表。
• 在多列中渲染列表项目。
• 支持列表标题、列表页脚和项目分隔符。
• 下拉刷新。
• 滚动加载。
• 支持 ScrollToIndex。
• 可配置的可视性回调。

要使用FlatList 组件，您需要按照以下步骤进行操作。

首先，从react-native 库中导入FlatList 组件。

import { FlatList } from 'react-native';Code language: JavaScript (javascript)

其次，将参数传递给 data 和renderItem 道具。

<FlatList
   data={items}
   renderItem={renderItem}
/>Code language: JavaScript (javascript)

FlatList 只需要两个道具。

• data 是要渲染的项目数组（或类似数组）。
• renderItem 是一个回调函数，它定义了如何渲染每个项目。

renderItem 回调接收一个对象并返回一个 JSX 元素，它定义了如何渲染每个项目。

renderItem({ item, index, separators})Code language: JavaScript (javascript)

在这个renderItem 函数中。

• item 是 data 数组中的一个项目。
• index 存储item 在 data 数组中的索引。
• separators 是一个对象，它提供方法来处理项目分隔符的渲染。在实践中，您很少使用此参数。

FlatList 有一个可选但重要的道具，名为keyExtrator。

keyExtractor 定义了一个函数，该函数为给定项目提取一个唯一的键。React Native 使用该键进行缓存和跟踪项目重新排序。

默认情况下，keyExtractor 使用项目的key 或id 属性（item.id 或item.key），然后回退到使用index。因此，如果列表中的项目具有id 或key 属性，您可以忽略keyExtractor 道具。

我们将演示如何使用FlatList 组件来渲染以下项目。

export const items = [
    { id: 1, name: 'Apple', emoji: '🍎' },
    { id: 2, name: 'Banana', emoji: '🍌' },
    { id: 3, name: 'Cherry', emoji: '🍒' },
    { id: 4, name: 'Grapes', emoji: '🍇' },
    { id: 5, name: 'Carrot', emoji: '🥕' },
    { id: 6, name: 'Potato', emoji: '🥔' },
    { id: 7, name: 'Broccoli', emoji: '🥦' },
    { id: 8, name: 'Spinach', emoji: '🥬' },
    { id: 9, name: 'Milk', emoji: '🥛' },
    { id: 10, name: 'Cheese', emoji: '🧀' },
    { id: 12, name: 'Butter', emoji: '🧈' }
];Code language: JavaScript (javascript)

基本 FlatList 示例

以下示例说明了如何使用FlatList 组件来渲染项目。

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {
    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listTitle}>{item.name}</Text>
            <Text style={styles.listTitle}>{item.emoji}</Text>
        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                renderItem={renderItem} />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    list: {
        flex: 0.5,
        fontSize: 16,
    },
    listItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
    },
    listTitle: {
        fontSize: 40
    },
});


export default App;Code language: JavaScript (javascript)

输出

它是如何工作的。

首先，使用FlatList 组件来渲染项目。

<FlatList
   style={styles.list}
   data={items}
   renderItem={renderItem} />Code language: HTML, XML (xml)

在这段代码中，我们将items 数组、renderItem 函数和styles.list 传递给FlatList 组件。

其次，定义renderItem 函数来渲染每个项目。

const renderItem = ({ item }) => {
   return <View style={styles.listItem}>
            <Text style={styles.listTitle}>{item.name}</Text>
            <Text style={styles.listTitle}>{item.emoji}</Text>
        </View>
}Code language: JavaScript (javascript)

renderItem 函数接收一个项目，并分别渲染其name 和emjoi。

要将name 和emoji 显示为单独的列，我们将flexDirection 设置为'row'，将justifyContent 设置为'space-between'。

显示水平列表

以下示例使用FlatList 组件来显示水平列表。

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listEmoji}>{item.emoji}</Text>
            <Text style={styles.listTitle}>{item.name}</Text>
        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                horizontal
                data={items}
                renderItem={renderItem} />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    list: {
        fontSize: 16,

    },
    listItem: {
        alignItems: 'center',
        height: 120,
        padding: 16,
        backgroundColor: '#efefef',
        borderColor: '#ccc',
        borderRadius: 16,
        borderWidth: 1,
        marginHorizontal: 8,
        marginVertical: 4,

    },
    listEmoji: {
        fontSize: 48,
    },
    listTitle: {
        fontSize: 18,
    },
});


export default App;Code language: JavaScript (javascript)

显示多列

以下示例使用 numColumns 道具将 FlatList 组件的列数设置为三。

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.listItem}>
            <Text style={styles.listEmoji}>{item.emoji}</Text>

        </View>
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                keyExtractor={item => item.id}
                renderItem={renderItem}
                numColumns={3}

            />
        </SafeAreaView>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    list: {
        fontSize: 16,
    },
    listItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        marginHorizontal: 8,
        marginVertical: 4,
    },
    listEmoji: {
        fontSize: 48,
    },

});

export default App;
Code language: JavaScript (javascript)

输出

带有标题、页脚和项目分隔符的 FlatList

以下示例展示了如何为FlatList 渲染列表标题、列表页脚和项目分隔符。

import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';


const App = () => {

    const renderItem = ({ item }) => {
        return <View style={styles.item}>
            <Text style={styles.itemTitle}>{item.name}</Text>
            <Text style={styles.itemTitle}>{item.emoji}</Text>
        </View>
    }

    const header = () => (
        <Text style={styles.header}>My Favorite List</Text>

    );

    const footer = () => (
        <Text style={styles.footer}>Fruit, drinks and food.</Text>
    );

    const separator = () => (
        <View style={styles.separator} />
    );

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                style={styles.list}
                data={items}
                renderItem={renderItem}
                ListHeaderComponent={header}
                ListFooterComponent={footer}
                ItemSeparatorComponent={separator}
            />
        </SafeAreaView>
    )
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    list: {
        flex: 0.5,
        fontSize: 16,
    },
    header: {
        fontSize: 32,
        marginVertical: 12,
        padding: 8,
    },
    footer: {
        padding: 8,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 8,
    },
    itemTitle: {
        fontSize: 24
    },
    separator: {
        height: 1,
        width: '100%',
        backgroundColor: '#ccc',
    },
});


export default App;Code language: JavaScript (javascript)

输出

在此示例中，我们使用ListHeaderComponent、ListFooterComponent 和ItemSeparatorComponent 道具来为FlatList 渲染列表标题、列表页脚和项目分隔符。

总结

• 使用FlatList 组件来高效地渲染大型列表。
• FlatList 组件需要 data 和 renderItem 道具。data 代表要渲染的项目列表，renderItem 定义了如何渲染每个项目。