React Native 限制字符

Question

I am working with the API.

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

I want to show only the first 50 characters of the description. How can I do that?

Answer 1

You can just use regular javascript functions to do that. In this case substring

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

Answer 2

Welcome @Nai to StackOverflow,

You may use the pure JavaScript functions. slice or maybe substring .

Use of Slice:-

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

Answer 3

Not exactly 50 characters, but you could achieve this with a combination of:

• Declare numberOfLines prop for text and set it to 1 / 2 (depending on your needs).
• Declare ellipsizeMode with whatever you want it to be.
• Set width of the container / text itself to the width you need and want to display.

Link to docs on Text in React Native.

This way you're making sure that your text is going to show correctly and no word is going to be cut in an ugly way.