React Native лимитные символы

Question

Я работаю с API.

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description}
  </Text>
 );
};

Я хочу отображать только первые 50 символов описания. Как я могу это сделать?

Answer 1

Не совсем 50 символов, но вы могли бы добиться этого с помощью комбинации:

• Объявить numberOfLines prop для текста и установить его на 1/2 (в зависимости от ваших потребностей).
• Объявите ellipsizeMode тем, что вы хотите.
• Установите ширину самого контейнера / текста на ту ширину, которая вам нужна и которую вы хотите отобразить.

Ссылка на документы по тексту в React Native.

Таким образом вы убедитесь, что ваш текст будет отображаться правильно и ни одно слово не будет вырезано некрасиво.

Answer 2

Добро пожаловать, @Nai в StackOverflow,

Вы можете использовать чистые JavaScript функции. slice или, возможно, substring.

Использование среза: -

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description.slice(0, 50)}
  </Text>
 );
};

Answer 3

Для этого вы можете просто использовать обычные javascript функции. В данном случае подстрока

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description.substring(0, 50)}
  </Text>
 );
};