React Native flex-box对齐图标和文本

Question

在react native应用程序中,我使用'react-native-vector-icons/MaterialIcons'.

我试着<用一些文字按钮.不幸的是,<图标未与文本对齐.文本与< 底部对齐而不是中间对齐在同一行.

我没有flex: 1.代码已更新.

我的代码

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

我的风格

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

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }

Answer 1

答案是有flex: 1没有height.我也用,flexDirection: 'row'因为我有两个元素.

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

Answer 2

您也可以<Icon>在Text. 在这种情况下，它将遵循Text的风格。

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