在反应原生的按钮中居中图像和文本

Question

我想要一个带有图像和文本居中的按钮。 该按钮位于屏幕底部。

我有这个代码：

<TouchableOpacity style={Styles.oneButton}>
    <View style={Styles.oneButtonView}>
        <Text style={Styles.payTextDollar}>
            <Image
                style={Styles.imageButton}
                source={props.image}
            />
            Pay
        </Text>
    </View>
</TouchableOpacity>

oneButton: {
    height: 60,
    backgroundColor: '#e41c23',
}

oneButtonView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: 20,
    justifyContent: 'center',
}

payTextDollar: {
    flex: 1,
    color: '#ffffff',
    fontSize: 20,
    fontFamily: 'MetaOffc-Light',
    textAlign: 'center',
}

imageButton: {
    marginTop: 6,
}

这在 iOS 上效果很好，但是在 Android 上图像真的很小，就像这样：https://i.stack.imgur.com/jFWAy.png

你对这种行为有什么了解吗？ 你知道是否有另一种解决方案让图像和文本像这样在按钮中居中：https://i.stack.imgur.com/geBSz.png

谢谢！

Answer 1

您在图像上设置了哪些样式？ 此外，您不必将图像嵌套在文本中。我会把它拿出来放在正文之前。