React composant de texte natif en utilisant le nombre de lignes
Existe-t-il un moyen de déterminer quand le texte sera tronqué lors de l'utilisation du nombre de lignes? J'ai cherché partout et aucune réponse claire. Je vous remercie!
Vous pouvez utiliser numberOfLines comme accessoire pour <Text /> composant. Cela dépend de la largeur de votre composant puis calculez la longueur du texte. Cet accessoire est couramment utilisé avec ellipsizeMode . Exemple:
<Text numberOfLines={2} ellipsizeMode='tail'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
Cela est désormais possible avec l'événement onTextLayout qui inclut un tableau de lines en cours de rendu. En regardant simplement la longueur, vous pouvez déterminer si vous êtes à la limite. Il y a d'autres détails dans le tableau lines comme la hauteur et la largeur réelles de chaque ligne qui peuvent être utilisées pour déterminer si le texte est tronqué.
const NUM_OF_LINES = 5;
const SOME_LONG_TEXT_BLOCK = 'Fill in some long text yourself ...';
return (<Text
numberOfLines={NUM_OF_LINES}
onTextLayout={({ nativeEvent: { lines } }) =>
setState({ showMoreButton: lines.length === NUM_OF_LINES })
}
>
{SOME_LONG_TEXT_BLOCK}
</Text>;