Comment pouvez-vous flotter: directement dans React Native?

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"?

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.

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

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

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

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

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

<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.

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