React Native resizeMode='contain'
组件中的Image
使Android设备和模拟器上的某些图像失真。对于大多数图像,它会在PNG图像背景中创建扭曲的线。我尝试了许多不同的图像,也尝试过调整它们的大小,但是没有什么能解决扭曲的彩色线条的问题。
注意:所有这些图像在iOS上看起来都很好。
Andoid Nexus 10 API 28 emulator
这是我的Image
组件的代码。我正在尝试为Pizza应用程序创建图像的网格视图。
<View style={{
flex: 1,flexDirection: 'column',justifyContent: 'center',alignItems: 'stretch',}}>
{/* ==================================First Row ===================================*/}
<View style={{ height: 600,flexDirection: 'row',backgroundColor: 'transparent',marginVertical: 10 }}>
<View style={{
flex: 1,marginHorizontal: 20,borderWidth: 2,borderColor: 'lightgray',borderRadius: 10
}}>
<Image
style={{
flex: 1,height: undefined,width: undefined,borderColor: 'black',borderWidth: 1,}}
source={require('./Images/pizza5.png')}
resizeMode='contain'>
</Image>
<Text style={{ fontSize: 20,marginVertical: 5,marginHorizontal: 10 }}>Pizza 1</Text>
<Text style={{ fontSize: 17,marginTop: 15,marginBottom: 10,marginHorizontal: 10 }}>$10.99</Text>
</View>
<View style={{
flex: 1,borderRadius: 10,marginRight: 20,}}>
<Image
style={{
flex: 1,borderWidth: 1
}}
source={require('./Images/pizza1copy.png')}
resizeMode='contain'>
</Image>
<Text style={{ fontSize: 20,marginHorizontal: 10 }}>Pizza 2</Text>
<Text style={{ fontSize: 17,marginHorizontal: 10 }}>$10.99</Text>
</View>
</View>
</View>