如何使按钮中的图标居中？答案

【问题标题】：How to Center an Icon in a Button?如何使按钮中的图标居中？
【发布时间】：2021-08-22 23:25:34
【问题描述】：

我正在尝试使用一个按钮进行导航，因此我希望该按钮是一组图标和文本，我可以单击它们来导航到新页面。该功能通过以下方式工作：

<FontAwesome5.Button style={styles.iconButton} name="history" size={10} color={Colors.light.tabBackground} onPress={() => navigation.navigate('TabOneScreen')}>
    <Text style={styles.subText} lightColor={Colors.light.tabBackground}>History</Text>
</FontAwesome5.Button>

...

const styles = StyleSheet.create({
    iconButton: {
        flexDirection: "column",
        justifyContent: 'center',
        alignItems: 'center',
        width: 100,
        backgroundColor: 'red',
      },
  });

这个按钮是这样渲染的：

垂直间距很好。然而，虽然文本水平居中，但图标显然不是。无论我尝试过什么样式，我都无法将图标和文本都作为按钮水平居中。背景通常会被移除，但我在这里添加它是出于调试目的。

【问题讨论】：

标签： reactjs react-native react-button

【解决方案1】：

直接给图标添加样式：

<FontAwesome5.Button iconStyle={{ alignSelf: 'center' }}  ...ther props>
...text
</FontAwesome5.Button>

【讨论】：

如果我将图标样式中的 alignSelf 的值更改为 flex-start 或 flex-end，这有助于它沿轴移动，但是当它设置为 center 时，它看起来完全一样。跨度>