將圖片和文本置於原生按鈕中

我想要一個圖片和文本居中的按鈕。該按鈕放置在屏幕的底部。將圖片和文本置於原生按鈕中

我有這樣的代碼：

<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

謝謝！

來源

2017-08-30 Kazuwa

你在圖像上設置了什麼風格？此外，你不應該在文本中嵌套圖像。我會把它拿出來放在文字之前。

來源

2017-08-30 20:38:02 basudz

我編輯了我的文章，我添加了圖像樣式。我知道把圖像放在文本中並不是常規的，但如果我把它放在外面，我無法設法將所有內容置於按鈕中。 – Kazuwa

@Kazuwa你可能想給你的imageButton風格的高度和寬度。也可以在你的風格或你的組件中使用resizeMode來處理縮放。 – basudz

將圖片和文本置於原生按鈕中

回答

相關問題