Centrer une image et un texte dans un bouton en réagissant natif

Question

Je voudrais avoir un bouton avec une image et un texte centré. Le bouton est placé en bas de l'écran.

Je possède ce code:

<TouchableOpacity style={Styles.oneButton}> 
    <View style={Styles.oneButtonView}> 
     <Text style={Styles.payTextDollar}> 
      <Image 
       style={Styles.imageButton} 
       source={props.image} 
      /> 
      Pay 
     </Text> 
    </View> 
</TouchableOpacity> 

oneButton: { 
    height: 60, 
    backgroundColor: '#e41c23', 
} 

oneButtonView: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    height: 20, 
    justifyContent: 'center', 
} 

payTextDollar: { 
    flex: 1, 
    color: '#ffffff', 
    fontSize: 20, 
    fontFamily: 'MetaOffc-Light', 
    textAlign: 'center', 
} 

imageButton: { 
    marginTop: 6, 
} 

cela fonctionne très bien d'iOS, cependant, l'image est vraiment petit sur Android, comme ceci: https://i.stack.imgur.com/jFWAy.png

Savez-vous quoi que ce soit au sujet de ce comportement? Savez-vous s'il existe une autre solution pour avoir l'image et le texte centré dans le bouton comme ceci: https://i.stack.imgur.com/geBSz.png

Merci!

Answer 1

Quels sont les styles que vous avez définis sur votre image? De même, vous ne devriez pas avoir à imbriquer l'image dans le texte. Je le retirerais et le mettrais avant le texte.