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

Posted 2023-02-22

【中文标题】在反应原生的按钮中居中图像和文本

【英文标题】：Center a image and a text in a button in react native

【发布时间】：2018-02-08 16:12:54

【问题描述】：

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

我有这个代码：

<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

谢谢！

【参考方案1】：

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

【讨论】：

我编辑了我的帖子，我添加了图像样式。我知道将图像放在文本中并不传统，但如果我把它放在外面，我无法将所有内容都集中在按钮中。

@Kazuwa 您可能希望为您的 imageButton 样式设置高度和宽度。还请查看在您的样式或 组件上使用 resizeMode 来处理缩放。