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
    }

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

答案是 flex: 1 而不是 height 。我也使用 flexDirection: 'row' 因为我有两个元素。

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

原文由 Dan 发布，翻译遵循 CC BY-SA 3.0 许可协议