Comment pouvez-vous flotter: directement dans React Native?


157

J'ai un élément que je veux flotter à droite, par exemple

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Comment le Textflotter / aligner vers la droite? Aussi, pourquoi occupe-t-il Texttout l'espace du View, au lieu de l'espace réservé à "Hello"?


Je me demande si vous avez trouvé une réponse car les 3 premières réponses disent toutes d'utiliser 3 attributs de style différents! justifyContent, alignItems, alignSelf. Je me demande ce qui est correct.

Réponses:


278

pourquoi le texte occupe-t-il tout l'espace de la vue, au lieu de l'espace réservé à "Bonjour"?

Parce que le Viewest un conteneur flexible et a par défaut flexDirection: 'column'et alignItems: 'stretch', ce qui signifie que ses enfants doivent être étirés pour remplir sa largeur.

(Notez, d'après la documentation , que tous les composants de React Native sont display: 'flex'par défaut et que cela display: 'inline'n'existe pas du tout. De cette façon, le comportement par défaut de a Textdans a Viewdans React Native diffère du comportement par défaut de spanwithin a divsur le Web; dans ce dernier cas, l'étendue ne remplirait pas la largeur du divcar a spanest un élément en ligne par défaut. Un tel concept n'existe pas dans React Native.)

Comment le texte peut-il être flotté / aligné vers la droite?

La floatpropriété n'existe pas dans React Native, mais de nombreuses options s'offrent à vous (avec des comportements légèrement différents) qui vous permettront d'aligner à droite votre texte. Voici ceux auxquels je peux penser:

1. Utiliser textAlign: 'right'sur l' Textélément

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Cette approche ne change pas le fait que le Textremplit toute la largeur du View; il aligne juste à droite le texte dans le Text.)

2. Utilisez alignSelf: 'flex-end'sur leText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Cela réduit l' Textélément à la taille requise pour contenir son contenu et le place à la fin de la direction transversale (la direction horizontale, par défaut) du View.

3. Utilisez alignItems: 'flex-end'sur leView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Cela équivaut à définir alignSelf: 'flex-end'sur tous les Viewenfants de.

4. Utilisez flexDirection: 'row'et justifyContent: 'flex-end'sur leView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'définit la direction principale de la mise en page pour qu'elle soit horizontale au lieu de verticale; justifyContentest juste comme alignItems, mais contrôle l'alignement dans la direction principale au lieu de la direction transversale.

5. Utiliser flexDirection: 'row'sur Viewet marginLeft: 'auto'sur leText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Cette approche est démontrée, dans le contexte du web et du vrai CSS, sur https://stackoverflow.com/a/34063808/1709587 .

6. Utilisez position: 'absolute'et right: 0sur Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Comme dans le vrai CSS, cela Textsupprime le "hors flux", ce qui signifie que ses frères et sœurs pourront le chevaucher et que sa position verticale sera en haut du Viewpar défaut (bien que vous puissiez définir explicitement une distance à partir du haut du Viewen utilisant la toppropriété style).


Naturellement, laquelle de ces différentes approches vous souhaitez utiliser - et si le choix entre elles compte même du tout - dépendra de votre situation précise.


2
Aucune de ces solutions ne fonctionne. :( Mon objectif était de faire flotter une légende, puis le texte venant de la gauche la contournerait. Comme ceci - stackoverflow.com/q/19179424/1828637 - Donc j'espérais faire <Text><Text>FLOAT TEXT</Text>multi line text here which wraps around float text:. Ou même mais avec une image comme ceci: <View><Text><Image />multi line text which wrap around float image</Text>.
Noitidart

Merci pour la réponse @Mark Amery! J'aime vraiment la cinquième (5e) approche car je n'aime pas définir une constante pour la hauteur de la vue / du conteneur car elle se redimensionne automatiquement.
Monero Jeanniton

Le n ° 4 a fonctionné un régal pour moi. Je soupçonne que quiconque ayant des problèmes doit examiner la manière dont les vues sont contenues, cela peut avoir une incidence sur la disposition flexible des éléments enfants.
Tahir Khalid

82

Vous pouvez spécifier directement l'alignement de l'élément, par exemple:

textright: {    
  alignSelf: 'flex-end',  
},

3
@goodniceweb Vous êtes confus; il n'y a pas d'éléments en ligne dans React Native. Les seules displayvaleurs valides sont 'flex'et 'none'.
Mark Amery

34

Pour moi, m'installer alignItemsà un parent a fait l'affaire, comme:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

20

Vous n'êtes pas censé utiliser des flotteurs dans React Native. React Native exploite la flexbox pour gérer tout cela.

Dans votre cas, vous voudrez probablement que le conteneur ait un attribut

justifyContent: 'flex-end'

Et à propos du texte prenant tout l'espace, encore une fois, vous devez jeter un œil à votre conteneur.

Voici un lien vers un très bon guide sur flexbox: Un guide complet sur Flexbox


13
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Si vous souhaitez vous déplacer horizontalement (ligne) ou verticalement (colonne)

justifyContent: la direction dans laquelle vous souhaitez vous déplacer.


1
Un peu trompeur; justifyContentne choisit pas une direction en soi; il offre un tas d'options sur la façon dont les choses sont positionnées et espacées le long de la direction principale du flex.
Mark Amery

0

Vous pouvez flotter: directement dans React natif en utilisant flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

pour plus de détails: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction


1
Cela ne fait que répéter une approche que j'avais déjà publiée (c'est l'option 4 dans ma réponse ) et je ne vois aucune valeur ajoutée.
Mark Amery
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.