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

Question

如何为平面列表中的每 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;

我的应用程序看起来像：

但我想做到这一点：

如何为平面列表中的每 3 个项目添加分隔符？我可以在每一项之后添加一个分隔符。我没有找到合适的道具。

Answer 1

如果您的数据项没有 id 或可以轻松区分两个项目的属性，请考虑使用计数器来跟踪您的

separator

函数被调用的次数。

为此，可以使用

useRef

钩子，如：

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数

由于这个钩子是可变的，因此可以计算该函数被调用的次数，从而跟踪跳过了多少项。

import { useRef } from 'react'; 

let skipItems = 3; // change to your desired number
let count = useRef(0);

const separator = (e) => {
        count.current += 1;
        return (
          (count.current % skipItems === 0) ? <View style={styles.separator}/> 
                                            : null
       );
}

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

备注：

1. 如果您愿意，可以选择

   useState

   挂钩；
2. 使用

   keyExtractor

   中的某个键非常重要，因为它用于缓存并作为跟踪项目重新排序的反应键。

Answer 2

首先，传递一个接收参数的箭头函数。在本例中，它是

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>
    );

正如您在这个工作中看到的示例