React Native flex-box align icon and text

问题

In a react native app, I use 'react-native-vector-icons/MaterialIcons'.

I try to a < button with some text. Unfortunately, the < icon isn't aligned center with the text. The text is on same line as the < but bottom-aligned instead of middle-aligned.

I didn't have flex: 1. The code has been updated.

My code

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

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

回答1:

The answer is to have flex: 1 and not height. I also use flexDirection: 'row' because I have two elements.

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

回答2:

use active keyword before a name and also import icon from native-base.

来源：https://stackoverflow.com/questions/36391426/react-native-flex-box-align-icon-and-text