React Native Flex-Box Symbol und Text ausrichten

In einemreact native App, ich benutze'react-native-vector-icons/MaterialIcons'.

Ich versuche zu einem< Knopf mit etwas Text. Leider ist das<as @ -Symbol ist nicht mittig mit dem Text ausgerichtet. Der Text steht in derselben Zeile wie das< aber unten anstatt in der Mitte ausgerichtet.

Ich hatte nichtflex: 1. Der Code wurde aktualisiert.

Mein Code

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

Meine 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
    }

Antworten auf die Frage(2)

Ihre Antwort auf die Frage