react-native - 包含View的Fit Image,而不是整个屏幕大小

我正在尝试将图像放入其包含的视图中,以便我可以拥有无​​缝的图像网格.问题是,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
  }
})

布局:

结果(带resizeMode='contain'):

结果(带resizeMode='cover'):

如您所见,covered图像非常大,并且与整个屏幕一样宽,并且不适合立即包含的视图.

更新1:

通过对图像应用缩放变换并将其从中心缩小,我能够获得接近我正在寻找的结果:

变换:

transform: [{ scale: 0.55 }]

生成的布局(没有边距或填充):

将尺寸设置为视图,并确保将图像的高度和宽度设置为"未定义",如下例所示:

这将确保您的图像缩放并完美地适合您的视图.

例如，如果您知道宽高比，则如果您的图像是方形的，则可以设置height或width来填充容器，并通过该aspectRatio属性 设置另一个

如果要height自动设置，请使用以下样式：

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

注意：height必须undefined

我无法使用resizeMode属性来运行示例Image,但因为图像都是正方形,所以有一种方法可以使用窗口的尺寸和flexbox来完成.

设置flexDirection: 'row',flexWrap: 'wrap'然后,只要它们都是相同的尺寸,它们都会排列.

我把它设置在这里

https://snack.expo.io/HkbZNqjeZ

"use strict";

var React = require("react-native");
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  ScrollView
} = React;

var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
  render: function() {
    var images = [];

    for (var i = 0; i < 10; i++) {
      images.push(
        
          
        
      );
    }

    return (
      
        
          {images}
        
      
    );
  }
});