Блог

Существует ли какой-либо способ получить усеченный текст в RN, когда мы используем numberOfLines?

Например:

Компонент

  <Text style={{width: 50}} numberOfLines={3}>
    Some very long text with tons of useful info
 </Text>
  

Вывод

  Some
 very
 long...
  

Я хочу знать, какой именно текст виден конечному пользователю. Возможно ли это как-то?

Спасибо за любую помощь!

PS Я пытался использовать функции Ref для получения содержимого, но он содержит реквизиты со всем текстом, поэтому это не помогло

Вы можете использовать реквизит onTextLayout следующим образом.

В e.nativeEvent.lines есть каждая строка в тексте, если у вас есть текст и количество строк, вы можете использовать этот массив, как показано ниже, и просмотреть тексты в каждой строке. Это работает в Android, не уверен в Интернете.

 export default function App() {
  
  const text =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

  const lines = 3;

  return (
    <View style={{ flex: 1 }}>
      <Text
        onTextLayout={(e) => {
          const shownText = e.nativeEvent.lines.slice(0, lines).map((line) => line.text).join('');
          alert(shownText);
          const hidenText = text.substring(shownText.length);
          alert(hidenText);
        }}
        numberOfLines={lines}
        onPress={this.toggleUser}>
        {text}
      </Text>
    </View>
  );
}
  

 You can combine numberOfLines and width / flex prop to achieve this effect.

<Text numberOfLines={1} style={{ width: 100 }}>
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown
    printer took a galley of type and scrambled it to mak
</Text>