Réagir indigènes automatique de l'affichage de la largeur par le texte à l'intérieur

Que je sais, réagir indigènes de la feuille de style ne prend en charge min-largeur/max-width de la propriété.

J'ai vue et le texte à l'intérieur. L'affichage automatique de la largeur de ne pas redimensionner par hériter de l'élément de texte.

Comment faire pour résoudre ce problème et de faire afficher la largeur automatiquement défini à l'aide de la largeur du texte?

Mon code est:

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

En commun HTML/CSS je réalise donc:

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

Avis: flex: 1 sur la vue parent n'est pas utile pour moi.
Texte apparaît comme 

"Sam"
"ple"
"Tex"
"t"
InformationsquelleAutor xercool | 2016-07-06
  1. 104

    "alignSelf" fait la même chose que 'display: inline-block' aurait en commun HTML/CSS et ça marche très bien pour moi.

    <View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
 <Text style={{color: '#ffffff'}}>
  Sample text here
 </Text>
</View>
    • Génie, merci. Est la deuxième alignSelf: 'flex-start' sur le Text lui-même nécessaire?
    • Je confirme -- alignSelf: 'flex-start' n'est pas nécessaire sur Text.
    • Merci pour la mise à jour de la réponse. J'ai relu mon commentaire et a été comme "ce deuxième alignSelf?"
    • Oui, absolument! Je suggère d'utiliser "minHeight' bien aussi!
    InformationsquelleAutor Nicholas Marcaccini Augusto
  2. 1

    Essayer de cette façon, votre exigence:

    Ici ma hauteur est Constante et je suis l'élargissement de la largeur par 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>

    La Hauteur et la Largeur de Tenter de Changer la hauteur à l'intérieur de la Vue du style à "auto", le code 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>

    Aussi essayer de Donner un rembourrage à la Vue pour arranger le texte correctement.

    InformationsquelleAutor Ryan Saleh
  3. 0

    Il travaille avec Nicolas réponse, sauf si vous voulez centrer la vue quelque part. Dans ce cas, vous pourriez ajouter un wrapper autour de l'affichage pour obtenir la largeur de son contenu et de mettre alignItems: 'center'. Comme ceci:

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

    Le fond de couleur est ajouté pour montrer la taille de l'intérieur de la vue

    InformationsquelleAutor Vladyslav Zavalykhatko