web-dev-qa-db-fra.com

React-Native: évitez l'habillage du texte

J'ai le titre d'une chanson et sa durée sur une seule ligne. Le titre de la chanson doit afficher des points de suspension, mais la durée ne doit jamais envelopper ou afficher des points de suspension. J'ai essayé plusieurs combinaisons, mais je n'arrive pas à faire ce travail pour les longs titres. La durée disparaît de l'écran lorsque le nom affiche des points de suspension ou la durée s'interrompt. Je ne peux pas coder en dur une largeur fixe sur la durée car cela peut changer la taille.

<View style={{flexDirection: 'row'}}>
    <Text numberOfLines={2} style={{fontSize: 16, textAlign: 'left'}}>{title}</Text>
    <Text style={{flex: 1, fontSize: 13, textAlign: 'right', marginTop: 2}}>{duration}</Text>
</View>
layoutreact-nativeflexbox
10
Anshul Koka

La solution a fini par être assez simple. Pas entièrement intuitif, mais voici comment résoudre ce problème. Il semble que le texte qui nécessite Ellipsis nécessite flex: 1.

 <View style={{ flexDirection: "row" }}>
<Text numberOfLines={1} style={{ flex: 1, textAlign: "left" }}>
    {title}
</Text>
<Text style={{ textAlign: "right" }}>{duration}</Text>
</View>;
25
Anshul Koka

Peut-être que la solution ci-dessous devrait satifier votre creteria

 return (
        <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginTop: 50}}>
            <Text numberOfLines={2} style={{fontSize: 16, flex: 1}}>{title}</Text>
            <Text style={{fontSize: 13, marginTop: 2}}>{duration}</Text>
        </View>
    );

Veuillez ref React-Native: éviter le retour à la ligne pour plus de détails et veuillez ignorer marginTop: 50, c'est pour la démo.

Veuillez vérifier et faites-moi savoir si cela ne fonctionne pas.

1
Durgaprasad Budhwani