Je suis confronté à un problème d'alignement du texte verticalement au centre du bouton, mais il reste légèrement inférieur au centre exact.
J'ai trouvé includeFontPadding dans la documentation en suggérant des écarts avec une police tierce.
La police semble correcte sur les appareils iOS mais elle n'est pas correctement centrée avec Android.
https://facebook.github.io/react-native/docs/text -style-props # includedefontpadding
Définissez sur false pour supprimer le remplissage de police supplémentaire destiné à faire de la place pour certains ascendeurs / descendants. Avec certaines polices, ce remplissage peut donner un aspect légèrement désaligné au texte lorsqu'il est centré verticalement. Pour de meilleurs résultats, définissez également textAlignVertical au centre. La valeur par défaut est vraie.
export default {
button: {
elevation: null,
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null
}
}
Style du bouton:
<Button
style={[style.button]} block >
<Text>Setup Now</Text>
</Button>
5 Réponses :
Au lieu d'utiliser un composant Text dans un composant Button. Utilisez le prop "title" tel que défini dans la documentation des boutons:
https: //facebook.github.io/react-native/docs/button.html
Donc, vous pourriez être
<Button
style={[style.button]} title="Setup Now" block >
</Button>
Pouvez-vous s'il vous plaît poster un écran avec une sortie?
ou vous pouvez ajouter du style à votre texte par exemple puis l'ajouter dans vos styles
const styles = StyleSheet.create ({
exemple: {
text-align: 'centre',
}
})
peut-être que cela peut vous aider pour votre référence
Vous pouvez essayer d'ajouter des styles à votre texte. Il est en fait mentionné directement dans cet extrait que vous avez cité dans la documentation:
Pour de meilleurs résultats, définissez également textAlignVertical au centre.
export default {
button: {
...
},
text: {
flex: 1, // fill the button
textAlign: 'center',
textAlignVertical: 'center', // this style is Android only
}
}
Avec ces styles:
<Text style={[style.text]}>Setup now</Text>
Si vous utilisez le bouton par défaut natif de réaction, le bouton par défaut natif de réaction ne prend pas en charge les propriétés de style et également au lieu d'utiliser un composant de texte dans un composant de bouton. Utilisez les propriétés "title" telles que définies dans la documentation officielle pour cela, veuillez vous référer au lien ci-dessous
https://facebook.github.io/react-native/docs/button.html
Réagissez également nativement fournir diverses options pour le bouton de votre bouton de personnalisation et selon votre utilisez pour cela s'il vous plaît se référer au lien ci-dessous
https: / /facebook.github.io/react-native/docs/handling-touches
Veuillez essayer la solution ci-dessous, cela peut vous aider à résoudre votre problème.
<TouchableOpacity
activeOpacity={.5}
style={styles.buttonStyle}>
<Text style={styles.textStyle}>Setup Now</Text>
</TouchableOpacity>
buttonStyle: {
padding: 14,
backgroundColor: 'red',
borderRadius: 6,
},
textStyle: {
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
fontSize: 16,
},
Essayez ceci:
<Button style={{display: 'flex', justifyContent: 'center'}}>
<Text>Setup Now</Text>
</Button>
Veuillez également ajouter les styles utilisés.
Style @Tim ajouté
Utilisez-vous le bouton natif de réaction standard?
@Tim: Oui, j'utilise le bouton standard
Pardon de vous avoir redemandé, pourriez-vous fournir un MCVE ? Je pense que sinon personne ne peut t'aider
Je ne pense pas que vous utilisiez le composant Button de react-native. Si vous utilisez le composant Button de react-native, cela vous donnera une erreur.
justifyContent: 'center', alignItems: 'center' peut aider
Avez-vous trouvé une solution?