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