web-dev-qa-db-fra.com

Vue automatique de largeur de vue automatique par le texte à l'intérieur

Comme je le sais, la feuille de style react-native ne prend pas en charge la propriété min-width/max-width.

J'ai une vue et un texte à l'intérieur. La vue en largeur automatique ne redimensionne pas par élément de texte hérité.

Comment résoudre ce problème et faire en sorte que la largeur de la vue soit automatiquement définie à l'aide de la largeur du texte?

Mon code est:

 <View style={{backgroundColor: '#000000'}}>
      <Text style={{color: '#ffffff'}}>Sample text here</Text>
 </View>

En HTML/CSS commun, je réaliserais ainsi:

 <div style="background-color: #000; display: inline;">Sample text here</div>

Remarque: flex: 1 sur la vue parent ne m’est pas utile. Le texte apparaît comme

"Sam"
"ple"
"Tex"
"t"
javascriptreactjsreact-native
34
xercool

"alignSelf" fait la même chose que "display: inline-block" en HTML/CSS commun et cela fonctionne très bien pour moi.

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
 <Text style={{color: '#ffffff'}}>
  Sample text here
 </Text>
</View>
115
Nicholas Marcaccini Augusto

Essayez cette façon pour votre besoin:

Ici, ma hauteur est constante et j'agrandis la largeur de la longueur du texte.

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 30, width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

Essayez de changer la hauteur dans le style de la vue en "auto" complet ci-dessous:

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 'auto', width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

Essayez également de donner un rembourrage à la vue pour organiser le texte correctement.

0
Ryan Saleh

Cela fonctionne avec Nicholas answer à moins que vous ne vouliez centrer la vue quelque part. Dans ce cas, vous pouvez ajouter une vue wrapper autour de la vue pour obtenir la largeur de son contenu et définir alignItems: 'center'. Comme ça:

    <View style={{ flex: 1, alignItems: 'center' }}>
        <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
            <Text>{'Your text is here'}</Text>
        </View>
    </View>

La couleur de fond est ajoutée pour montrer la taille de la vue interne

0
Vladyslav Zavalykhatko