Texte elipsis débordant

Question

J'ai un peu de mal à obtenir ce que je pensais être une mise en page facile à réaliser en react-native.

En gros, j'ai besoin de deux vues, sur une ligne, avec leur parent ayant justifyContent: 'space-between' .

Sur la première vue, il y a deux éléments de texte et l'un d'eux doit avoir une ellipse lorsqu'il se développe.

Ce que j'attendais :

Ce que j'obtiens à la place, c'est le débordement de ce composant texte :

    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>

      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text>AVATAR</Text>
        <View style={{ marginHorizontal: 15 }}>
          <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
        </View>
      </View>

      <View>
        <Text>9,999,999,999.99</Text>
      </View>

    </View>

Un bac à sable pour jouer avec un exemple : https://snack.expo.io/HkeFQbyvf

Answer 1

Si vous ajoutez flex: 1 à l'intérieur <View style={{ marginHorizontal: 15 }}> cela fonctionnera

Mise à jour de l'exemple de code

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>AVATAR</Text>
      <View style={{ flex: 1, marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

---

Mis à jour sur la base d'un commentaire

Et la raison principale est que l'intérieur <View style={{ marginHorizontal: 15 }}> est un flex rangée et en tant que tel flexibles horizontalement et ont besoin d'une largeur, qui flex: 1 fournir.

Si pour utiliser la valeur par défaut colonne direction, cela fonctionnerait sans, par exemple comme ceci :

  <View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>

    <View style={{ flex: 1 }}>
       <View style={{ marginHorizontal: 15 }}>
        <Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
      </View>
    </View>

    <View>
      <Text>9,999,999,999.99</Text>
    </View>

  </View>

Answer 2

Essayez d'ajouter flexShrink : 1 au style de la première vue interne.