按钮开头的 Native-Base 图标和居中的文本

Question

大家好我正在尝试创建我将在屏幕截图中显示的按钮。我的第一个屏幕截图是我现在拥有的，第二个是我想要的。尝试几个小时将我的图标放在开头。发现我可以在我的按钮上使用 flex-start 但我无法将我的文本居中任何提示？ （我正在使用 Native-Base 库）

<Button variant="outline" size="lg" justifyContent="center">
    <View style={{ flexDirection: "row", alignItems: "center" }}>
            <Icon as={MailIcon} />
            <Text size="sm">Sign Up With Email</Text>
    </View>
</Button>

我需要它来响应，因为我们有多个不同分辨率的电话设备。

Answer 1

只需在

text

之后添加一个与

Icon

具有相同样式的虚拟视图并添加

justifyContent:'space-between'

添加

padding

以保持按钮和内部视图之间的空间。

<Button>
  <View style={{ flexDirection: "row", justifyContent:'space-between' }}>
        <Icon style={iconStyle} />
        <Text>Sign Up With Email</Text>
        <View style={iconStyle}/>
 </View>
</Button>