В этой статье блога мы рассмотрим несколько методов усечения текста в React Native. Усечение текста — обычное требование при разработке мобильных приложений, особенно при ограниченном пространстве экрана. Мы обсудим различные подходы, приведем примеры кода и выделим их плюсы и минусы. Давайте погрузимся!

Метод 1: использование реквизита numberOfLines

import React from 'react';
import { Text, View } from 'react-native';
const TruncatedText = ({ text, lines }) => (
  <View>
    <Text numberOfLines={lines}>{text}</Text>
  </View>
);
export default TruncatedText;

Этот метод использует свойство numberOfLines, предоставленное компонентом Textв React Native. Он позволяет указать максимальное количество строк, отображаемых до того, как произойдет усечение. Однако имейте в виду, что этот метод просто скрывает переполнение и не позволяет отобразить полный текст.

Метод 2: использование реквизита ellipsizeMode

import React from 'react';
import { Text, View } from 'react-native';
const TruncatedText = ({ text }) => (
  <View>
    <Text numberOfLines={1} ellipsizeMode="tail">{text}</Text>
  </View>
);
export default TruncatedText;

Свойство ellipsizeMode — это еще один параметр, предоставляемый компонентом Text. Если установить значение "tail", в конце усеченного текста будет добавлено многоточие, указывающее на то, что контента больше. Этот метод полезен, если вы хотите отобразить одну строку усеченного текста с многоточием.

Метод 3. Использование пользовательской функции

import React from 'react';
import { Text, View } from 'react-native';
const truncateText = (text, maxLength) => {
  if (text.length > maxLength) {
    return `${text.substring(0, maxLength)}...`;
  }
  return text;
};
const TruncatedText = ({ text, maxLength }) => (
  <View>
    <Text>{truncateText(text, maxLength)}</Text>
  </View>
);
export default TruncatedText;

Этот метод предполагает создание специальной функции, которая усекает текст на основе заданной максимальной длины. При необходимости он добавляет многоточие для обозначения усечения. Этот подход дает вам полный контроль над логикой усечения.

Метод 4. Использование сторонней библиотеки (react-native-read-more-text)

import React from 'react';
import { Text, View } from 'react-native';
import ReadMore from 'react-native-read-more-text';
const TruncatedText = ({ text }) => {
  let readMoreRef;
  const renderTruncatedFooter = (handlePress) => (
    <Text onPress={handlePress}>Read more</Text>
  );
  const renderRevealedFooter = (handlePress) => (
    <Text onPress={handlePress}>Show less</Text>
  );
  return (
    <View>
      <ReadMore
        numberOfLines={2}
        renderTruncatedFooter={renderTruncatedFooter}
        renderRevealedFooter={renderRevealedFooter}
        onReady={handleTextReady}
      >
        <Text>{text}</Text>
      </ReadMore>
    </View>
  );
  function handleTextReady() {
    readMoreRef && readMoreRef.measure((width, height) => {
      readMoreRef && readMoreRef.setNativeProps({ numberOfLines: height > 16 ? 2 : null });
    });
  }
};
export default TruncatedText;

Если вам нужны более продвинутые функции усечения текста, вы можете использовать сторонние библиотеки, такие как react-native-read-more-text. Эта библиотека позволяет обрезать текст с помощью настраиваемых функций «Читать больше» и «Показать меньше». Это полезно при работе с длинным текстовым контентом.

В этой статье мы рассмотрели несколько методов усечения текста в React Native. Мы рассмотрели использование реквизитов numberOfLinesи ellipsizeMode, реализацию пользовательских функций усечения и использование сторонних библиотек, таких как react-native-read-more-text. Каждый метод имеет свои преимущества, и его следует выбирать исходя из конкретных требований вашего проекта. Применяя эти методы, вы можете обеспечить удобство работы даже при ограниченном пространстве экрана.