Réagir Natif flex-zone aligner icône et le texte

Dans un react native application, j'utilise 'react-native-vector-icons/MaterialIcons'.

J'essaie à un < bouton avec un texte. Malheureusement, la < icône n'est pas aligné centre avec le texte. Le texte est sur la même ligne que la < mais alignée en bas au lieu de moyen-alignés.

Je n'avais pas flex: 1. Le code a été mis à jour.

Mon code

    <TouchableOpacity style={styles.navBarLeftButton}>
       <Icon name="chevron-left" />
       <Text style={styles.buttonText}>My Button</Text>
    </TouchableOpacity>

Mes styles

    navBarLeftButton: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start'
      width: 100,
      paddingLeft: 8
    }

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }
La prochaine fois que vous tombez sur un tel problème, essayez de créer un exemple de projet sur RNPlay de sorte que la communauté peut rapidement comprendre quel est le problème et fournir une qualité de solution.

OriginalL'auteur Dan | 2016-04-03

  1. 13

    La réponse est d'avoir flex: 1 et pas height. J'utilise aussi flexDirection: 'row' parce que j'ai deux éléments.

    navBarLeftButton: {
  paddingLeft: 8,
  width: 100,
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'flex-start'
}

    OriginalL'auteur Dan