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