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

【问题标题】：React Native flexbox - detect last element in rowReact Native flexbox - 检测行中的最后一个元素
【发布时间】：2020-08-04 18:37:54
【问题描述】：

我有一个动态列表，其中包含使用 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',
    },
}

【问题讨论】：

标签： javascript react-native flexbox react-native-flexbox

【解决方案1】：

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

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

li span {
  padding: 20px
}

li + li::before {
      content: "\02022"
}

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

【讨论】：

【解决方案2】：

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

【讨论】：

您实际上给了我一个想法，即仅采用 x 偏移并将项目符号放在文本之前而不是之后。我可以保存第一个元素的 x 偏移量，然后检查哪个元素具有相同的偏移量并在没有项目符号的情况下渲染它。

【解决方案3】：

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

【讨论】：