javascript - react-native - 使图像适合包含 View ，而不是整个屏幕尺寸

Question

我正在尝试将图像放入其包含的 View 中，以便我可以拥有无​​缝的图像网格。问题是 resizeMode='contain' 似乎适合屏幕的宽度或至少适合一些更高级别的容器，我需要图像适合每个列表项的大小。

这是一个非常丑陋的样式和生成的网格示例:

样式:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },

  item: {
    flex: 1,
    overflow: 'hidden',
    alignItems: 'center',
    backgroundColor: 'orange',
    position: 'relative',
    margin: 10
  },

  image: {
    flex: 1
  }
})

布局:

<TouchableOpacity 
  activeOpacity={ 0.75 }
  style={ styles.item }
>
  <Image
    style={ styles.image }
    resizeMode='contain'
    source={ temp }
  /> 
</TouchableOpacity>

结果(使用resizeMode='contain'):

结果(使用resizeMode='cover'):

正如您所看到的，覆盖图像非常大，与整个屏幕一样宽，不适合直接包含的 View 。

更新1:

通过对图像应用缩放变换并将其从中心缩小，我能够获得接近我想要的结果:

变换:

transform: [{ scale: 0.55 }]

最终的布局(没有边距或填充):

Answer 1

如果您知道纵横比，例如，如果您的图像是方形的，您可以设置高度或宽度来填充容器并让另一个为由 aspectRatio 属性设置

如果您希望自动设置高度，请使用以下样式:

{
    width: '100%',
    height: undefined,
    aspectRatio: 1,
}

注意:高度必须是未定义

编辑(基于@rob-art的评论):
如果您的图像的宽高比与您想要在样式中设置的宽高比不同，您可以使用 resizeMode 来控制图像的显示方式。使用 resizeMode:'contain' 确保您的图像不会被裁剪。
请参阅documentation了解更多详情