Можно ли определить, будет ли текст обрезан?

Question

У меня есть следующий объект данных

const data = {
  longText: 'I really do ❤️ React Native',
  shortText: 'I ❤️ RN'
}

Я хочу попытаться отрендерить longText, но вернусь к shortText, только если значение будет усечено.

Можно ли определить, будет ли значение усечено?

Answer 1

Вы можете сделать это с помощью onTextLayout опоры текста, с помощью этой опоры вы можете определить, на сколько строк будет отрисован ваш текст.

const [nbrOfLines, setNbrOfLines] = React.useState(0);

return (
  <Text
    numberOfLines={1}
    onTextLayout={({ nativeEvent: { lines } }) => {
      if (!nbrOfLines) {
        setNbrOfLines(lines.length);
      }
    }}
  >
    { nbrOfLines < 2 ? data.longText : data.shortText }
  </Text>
);

Идея в том, чтобы визуализировать в сначала длинный текст, затем onTextLayout подсчитает количество строк текста и сохранит его в состоянии. После этого ваш компонент повторно отобразит короткий текст, если nbrOfLines> = 2.

Надеюсь, идея была ясна.

Подробнее о onTextLayout

Редактировать:

Я добавил условие внутри onTextLayout, чтобы избежать бесконечного состояния настройки, и numberOfLines пропеллер, чтобы всегда показывать текст в 1 строке