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

【问题标题】：React Native flex-box align icon and textReact Native flex-box 对齐图标和文本
【发布时间】：2016-07-23 07:58:00
【问题描述】：

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

【问题讨论】：

下次遇到此类问题时，请尝试在RNPlay 上创建示例项目，以便社区快速了解问题所在并提供高质量的解决方案。

标签： icons react-native flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在名称前使用 active 关键字，并从原生库中导入图标。

【讨论】：

请详细说明您的答案并展示一些示例代码。解释为什么你的答案与已经发布的答案不同。

【解决方案3】：

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

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

【讨论】：