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

当我尝试制作 wrapper 时 <Text numberOfLines={1}>它看起来像这样:

Answer 1

一个快速的解决方案是将您的父 View 更改为具有 maxHeight:24或 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>;