web-dev-qa-db-fra.com

Comment pouvez-vous flotter: directement dans React Native?

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

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

Comment la Text peut-elle être flottée/alignée à droite? Aussi, pourquoi la Text occupe-t-elle tout l'espace de la View, au lieu de l'espace réservé à "Hello"?

react-native
128
Some Guy

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

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

(Notez, par les documents , que tous les composants de React Native sont _display: 'flex'_ par défaut et que _display: 'inline'_ n'existe pas du tout. De cette manière, le comportement par défaut de Text dans un View dans React Native diffère du comportement par défaut de span dans un div sur le Web; dans ce dernier cas, l'envergure ne remplira pas la largeur de div car un span est un élément en ligne par défaut. Ce concept n'existe pas dans React Native.)

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

La propriété float n'existe pas dans React Native, mais il y a des charges d'options disponibles (avec des comportements légèrement différents ) qui vous permettra d’aligner correctement votre texte. Voici ceux auxquels je peux penser:

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

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

(Cette approche ne change pas le fait que Text remplit toute la largeur de View; elle aligne simplement le texte à l'intérieur de Text.)

2. Utilisez alignSelf: 'flex-end' sur le Text

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

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

3. Utilisez alignItems: 'flex-end' sur le View

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

Cela équivaut à définir _alignSelf: 'flex-end'_ sur tous les enfants de View.

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

_<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 être horizontale au lieu de verticale; justifyContent est identique à alignItems, mais contrôle l'alignement dans la direction principale au lieu de la direction transversale.

5. Utilisez flexDirection: 'row' sur le View et marginLeft: 'auto' sur le Text

_<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 CSS réel, à l’adresse https://stackoverflow.com/a/34063808/1709587 .

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

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

Comme dans le vrai CSS, cela prend le "débit" de Text, ce qui signifie que ses frères et sœurs pourront le chevaucher et que sa position verticale sera au sommet du View par défaut (bien que vous puissiez définir explicitement une distance à partir du haut). View en utilisant la propriété de style top).

Naturellement, laquelle de ces différentes approches vous voulez utiliser - et si le choix entre elles compte le plus - dépend de votre situation précise.

197
Mark Amery

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

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

Pour moi, paramétrer alignItems à un parent a fait l'affaire, comme ceci:

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

Vous n'êtes pas censé utiliser de flottants dans React Native. React Native utilise 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 regarder votre conteneur.

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

20
eyal83
<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 que vous souhaitez déplacer.

13
Santosh Pillai