web-dev-qa-db-fra.com

React-native: textAlign: 'right' ne met pas en forme correctement

Je suis assez nouveau pour réagir-native css-styling .. et avoir le code suivant:

 <Text>
<Text style={(styles.author, { textAlign: "left" })}>
    {question.view_count + " views\t" + question.comment_count}
    {question.comment_count > 1 || question.comment_count == 0
        ? " comments"
        : " comment"}
</Text>
<Text style={{ textAlign: "right" }}>
    {question.solution_count > 0
        ? question.solution_count + " solutions"
        : " Solve this"}
</Text>
</Text>;

Le problème est que le deuxième "textAlign: 'right'" ne fonctionne pas - le texte est toujours à gauche. Je veux que le texte soit sur la même ligne, mais (évidemment) le deuxième objet texte à droite.

Des allusions? Merci!

edit la sortie ressemble à ceci:  Screenshot

13
dv3

Je ne peux pas confirmer pour le moment, mais pouvez-vous essayer?

{textAlign: 'right', alignSelf: 'stretch'}

Laissez-moi savoir si cela fonctionne.

METTRE &AGRAVE; JOUR

Puis-je suggérer une solution de contournement? 

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>4 Views 0 Comments</Text>
  </View>
  <View style={{flex: 1}}>
    <Text style={{textAlign: 'right'}}>Solve This</Text>
  </View>
</View>
31
Mihir

J'ai constaté que, parce que j'utilisais un bouton de largeur totale (déjà alignSelf: 'stretch'), le contenu du texte était étiré verticalement et non horizontalement ... J'ai constaté que l'utilisation de flex: 1 sur l'élément de texte semblait plutôt fonctionner comme prévu. Exemple: 

finishButtonText: {
    textAlign: "center",
    flex: 1
} as StyleProp<TextStyle>

avec .tsx/.jsx:

<Button style={{alignSelf: 'stretch'}}>
    <Text style={styles.finishButtonText}>
        Test
    </Text>
</Button>
1

Donnez une largeur de 100% à votre balise de texte pour vous assurer qu’elle s’étire sur toute sa largeur, puis donnez à texalign le droit. Cela pourrait fonctionner.

0
Ramiah Viknesh