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

你可以用这个 css 技巧做到这一点：li + li::before

.list  {
  list-style: none;
  display: flex;
}

li span {
  padding: 20px
}

li + li::before {
      content: "022"
}

<ul class="list">
    <li>
        <span>Apple</span>
    </li>
    <li>
        <span>Banana</span>
    </li>
    <li>
        <span>Peach</span>
    </li>
</ul>

Answer 2

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

Answer 3

我的解决方案是在每个元素之前显示分隔符并用负的左边距隐藏它们。也许它不是最优雅的，但肯定不需要那么多努力。

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

React Native flexbox - detect last element in row

javascript

react-native

flexbox

react-native-flexbox