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

问题描述

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

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

这个按钮是这样呈现的：

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

解决方法

直接给图标添加样式：

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