Question

我有一张1242 X 450图像，我希望在1x 2x和3x设备上显示。我拥有的当前代码适用于3x设备，但我发现图像的边缘在2x设备上被裁剪，也可能在1x设备上裁剪。

在代码中，我将宽度设置为414，将高度设置为150（因为1242 X 450 / 3x）

有什么办法可以解决吗？

图像位于列表视图中

/usr/share/dict/words

Answer 1

您不需要处理图片的大小。你只需要正确地给出宽度和高度属性。

导入平台并获取设备的宽度和高度。https://facebook.github.io/react-native/docs/dimensions.html

var {scrHeight, scrwidth} = Dimensions.get('window');

定义图像容器样式

imageContainer = {
  width:scrwidth/5,
  height:scrHeight/5,
}

定义图像样式并使用resizeMode作为图像

resizeMode枚举（＆＃39;封面＆＃39;，＆＃39;包含＆＃39;，＆＃39;延伸＆＃39;，＆＃39;重复＆＃39;，＆＃39; center＆＃39; ）

imageStyle={ 
 flex:1,
}
<View style={styles.imageContainer }>
  <Image style={styles.imageStyle} resizeMode={'contain'}>
  </Image>
</View>

无论图像有多大，它都会覆盖screenWidth / 5 X screenHeight / 5。如果您的图像具有高分辨率而设备不是图像将被压缩，相反情况下它将被拉伸。这两种情况尤其是第二种情况如果图像分辨率和图像留下的区域之间存在很大差异，那么您的应用中的图像视觉将会很糟糕。为避免这种情况，您可以添加相同图像的不同大小。

add 
└── img
    ├── apple@1x.png 100x100  (resolutions are random)
    └── apple@2x.png 150x150
        apple@3x.png 175x175

https://facebook.github.io/react-native/docs/images.html

如果这样做，将通过自动反应选择正确的图像。根据设备的dpi选择图像。如果您的设备具有良好的分辨率，如果不是那么小的图像，您将获得更大除了大尺寸和低分辨率的设备（一些安卓平板电脑）之外，这种情况大多有效。在这种情况下，根据dpi图像可能是最小的图像，因此质量会很差。

React Native维护宽高比图像ios

1 个答案: