react-native - React Native 会截断最后一个单词，但是如果不合适就需要移除整个单词

Question

我想删除这张图片中的最后一个元素，但到目前为止我只能把它剪掉。

代码如下：

<View style={{ flexDirection: "row", flexWrap: "nowrap", overflow: "hidden" }}>
  {item.sortedTagObjects.map(({ tag, color }) => (
    <Text
      key={tag}
      style={{
        height: 24,
        lineHeight: 24,
        paddingHorizontal: 8,
        paddingVertical: 2,
        justifyContent: "center",
        textAlign: "center",
        backgroundColor: "purple",
      }}
    >
      {tag}
    </Text>
  ))}
</View>;

当我尝试制作包装器<Text numberOfLines={1}>时，它看起来像这样：

Answer 1

一个快速的解决方案是让您将父视图更改为具有maxHeight:24or height: 24，就像您的文本一样，并将您的 flexWrap 更改为flexWrap: 'wrap'而不是nowrap。

这将允许您只渲染 1 行，并隐藏其他行上的所有包装项目。

又名——

<View style={{ maxHeight: 24, flexDirection: "row", flexWrap: "wrap", overflow: "hidden" }}>
  {item.sortedTagObjects.map(({ tag, color }) => (
    <Text
      key={tag}
      style={{
        height: 24,
        lineHeight: 24,
        paddingHorizontal: 8,
        paddingVertical: 2,
        justifyContent: "center",
        textAlign: "center",
        backgroundColor: "purple",
      }}
    >
      {tag}
    </Text>
  ))}
</View>;