在平面列表中每 3 个项目添加一个分隔符 - React Native

Question

如何为 flatlist 中的每 3 个项目添加一个分隔符？我可以在每一项之后添加一个分隔符。我没有找到一个道具。这是我的代码：

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text} from 'react-native';

const DATA = [
    {
        id: 1,
        title: 'Item 1',
    },

    {
        id: 2,
        title: 'Item 2',
    },
    {
        id: 3,
        title: 'Item 3',
    },
    {
        id: 4,
        title: ' Item 4',
    },
    {
        id: 5,
        title: 'Item 5',
    },
    {
        id: 6,
        title: 'Item 6',
    },
    {
        id: 7,
        title: 'Item 7',
    },
];


const App = () => {

    const renderItem = ({ item }) => (
        <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
        </View>
    );

    const seperator = () => {
        return (
            <View style={styles.seperator} />
        )
    }

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={(items) => items.id}
                ItemSeparatorComponent={seperator}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 10,
        marginVertical: 8,
        marginHorizontal: 16,
    },
    title: {
        fontSize: 32,
    },
    seperator: {
        width: 300,
        height: 10,
        backgroundColor: 'red'
    }
});

export default App;

我的应用看起来像：

但我想做到：

如何为 flatlist 中的每 3 个项目添加一个分隔符？我可以在每一项之后添加一个分隔符。我没有找到它的道具。

Answer 1

首先，传递一个接收参数的箭头函数。在这种情况下，它是 e，它包含对象（例如第一个）：

{"highlighted":false,"leadingItem":{"id":1,"title":"Item 1"}}

所以这是一个简单的方法，获取 id 并检查它是否 %3 === 0。看看：

 const seperator = (e) => {
        return (
          (e.leadingItem.id % 3 == 0) ? <View style={styles.seperator}/>
                                      : null

        )
    }

然后

return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={(items) => items.id}
                ItemSeparatorComponent={(e) => seperator(e)}
            />
        </SafeAreaView>
    );

正如您在此工作中看到的那样 example

Answer 2

如果您的数据项没有 id 或属性可以轻松区分两个项目，请考虑使用计数器来跟踪多少次您的 separator 函数被调用了。

但是，使用 keyExtractor 中的某些键很重要，因为它用于缓存并作为反应键来跟踪项目重新排序。

对于这种情况，无论如何，可以使用 useRef 钩子，因为：

useRef returns a mutable ref object whose .current property is initialized to the passed argument

请注意，如果您改为选择 useState 挂钩，它仍然可行，但可能更冗长。

import { useRef } from 'react' 

let count = useRef(0)
const seperator = (e) => {
        count.current += 1
        return (
          (count.current % 3 == 0) ? <View style={styles.seperator}/>
                                   : null
       )
}

return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                ItemSeparatorComponent={(e) => seperator(e)}
            />
        </SafeAreaView>
)

因为它是可变的，每次调用函数时添加一个单位

在平面列表中每 3 个项目添加一个分隔符 - React Native

Add a separator every 3 item in flatlist - React Native

javascript

separator

react-native

react-native-flatlist

flatlist