將圖像和文本放在按鈕中以反應原生

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

您在圖像上設置了哪些樣式？ 此外，您不必將圖像嵌套在文本中。 我把它拉出來並把它放在文本之前。