javascript - React Native flexbox - 检测行中的最后一个元素

Question

我有一个动态列表，其中包含使用 flex-wrap 呈现在一行中的文本(例如标签)。我想在所有项目之间添加项目符号分隔符，每行中的最后一个项目除外。

例如，假设我有列表 ['apple', 'peach', 'orange', 'watermelon', 'pear'] .根据屏幕尺寸，我希望它们按行呈现，中间有小项目符号。

苹果•桃•橙

西瓜 • 梨

如您所见，将有两行，并且仅在一行上的元素之间有项目符号。现在，我可以使用 index检查它是否是列表中的最后一个元素 arr.map((i, index) => index < arr.length-1 && <View>...</View>)但是我在第一行的最后一个元素之后得到了一个项目符号

苹果•桃•橙•

西瓜 • 梨

这不是我想要的。现在假设我有更长的项目名称，并且第一行只呈现其中两个，我想要相同的效果，最后没有项目符号。

谁能帮我检测一行中的最后一个元素。

这是我的代码示例。

<View style={styles.section}>
    {
        tags.map((tag, index) => (
            <View key={tag.id} style={styles.tagItem}>
                <Text style={styles.tagTitle}>{tag.title}</Text>
                {index < tags.length - 1 && <Text>•</Text>}
            </View>
        ))
    }
</View>

这是我的样式对象:

{
    section: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    tagItem: {
        paddingHorizontal: 5,
        flexDirection: 'row',
    },
}

Answer 1

您可以将它们按 y 轴上的偏移量分成几组。然后你可以检查哪个元素离每个集合最右边，然后你可以跳过那个点。