Question

React Native resizeMode='contain'组件中的Image使Android设备和模拟器上的某些图像失真。对于大多数图像，它会在PNG图像背景中创建扭曲的线。我尝试了许多不同的图像，也尝试过调整它们的大小，但是没有什么能解决扭曲的彩色线条的问题。注意：所有这些图像在iOS上看起来都很好。

这是我的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, flexDirection: 'column', 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, flexDirection: 'column', backgroundColor: 'transparent',
                borderWidth: 2, borderColor: 'lightgray', borderRadius: 10, marginRight: 20,
              }}>
                <Image
                  style={{
                    flex: 1, height: undefined, width: undefined, borderColor: 'black', borderWidth: 1
                  }}
                  source={require('./Images/pizza1copy.png')}
                  resizeMode='contain'>
                </Image>
                <Text style={{ fontSize: 20, marginVertical: 5, marginHorizontal: 10 }}>Pizza 2</Text>
                <Text style={{ fontSize: 17, marginTop: 15, marginBottom: 10, marginHorizontal: 10 }}>$10.99</Text>
              </View>
            </View>
          </View>

Answer 1

尝试删除borderColor: 'black', borderWidth: 1并将其设置为其他父项View

React Native Image resizeMode ='contain'使Android设备和模拟器上的某些图像失真

1 个答案: