android - React Native Image resizeMode='contain' 扭曲了 Android 设备和模拟器上的一些图像

问题描述

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

Andoid Nexus 10 API 28 模拟器

亚马逊 Fire 平板电脑第 8 代。

iPad Pro（11 英寸）模拟器

这是我的Image组件代码。我正在尝试为比萨应用程序创建图像的网格视图。

<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>

标签： androidimagereact-nativeresizedistortion

android - React Native Image resizeMode='contain' 扭曲了 Android 设备和模拟器上的一些图像

问题描述

解决方案

推荐阅读