reactjs - 如何使按钮中的图标居中？

Question

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

<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',
      },
  });

此按钮呈现如下：

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

Answer 1

将样式直接添加到图标：

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