React native 如何布局动态大小的网络映像

我正在尝试渲染一组不同大小的网络图像（运行时未知）。在web CSS中，我可以执行以下操作：

div.container {
  display: flex
  flex-wrap: wrap
}

div.container img {
  max-height: 250px;
  max-width: 100%;
  margin: 0 5px 5px 0;
  vertical-align: top;
}

图像将被很好地布置

但是，在React Native中，

从不尝试将其尺寸设置为图像的实际大小。除非您手动指定某些内容，否则它将保留为0乘0。我无法手动指定某些内容，因为我不知道图像的尺寸

有没有关于如何在React Native中实现类似于图像的最大高度和最大宽度的想法

---

我发现，如果您想使用参数（每行图像）将图像显示为正方形，则可以通过测量容器来实现，而不是使用最大高度、最大宽度的方法。这可能是下一个最好的办法

var IMAGES_PER_ROW = 3;

var Images = React.createClass({
  getInitialState: function() {
    return {
      imageStyle: {},
    };
  },

  onContainerLayout: function(e) {
    var layout = e.nativeEvent.layout;
    var containerWidth = layout.width;
    var imageSize = containerWidth / IMAGES_PER_ROW;
    this.setState({
      imageStyle: {
        width: imageSize,
        height: imageSize,
      },
    });
  },

  renderImages: function() {
    var imageStyle = this.state.imageStyle;

    var images = [];
    for (var i = 0; i < this.props.imageURLs; i++) {
      var imageURL = this.props.imageURLs[i];
      images.push(
        <View key={imageURL} style={imageStyle}>
          <Image source={imageURL} style={[styles.image, imageStyle]} />
        </View>
      );
    }

    return images;
  },

  render: function() {
    return (
      <View onLayout={this.onContainerLayout} style={styles.container}>
        {this.renderImages()}
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  image: {
    resizeMode: 'contain', // cover works too, see https://facebook.github.io/react-native/docs/image.html#resizemode
  },
});

var图像每行=3；
var Images=React.createClass({
getInitialState:函数（）{
返回{
图像样式：{}，
};
},
OnContainer布局：功能（e）{
var布局=e.nativeEvent.layout；
var containerWidth=布局宽度；
var imageSize=集装箱宽度/每行图像数；
这是我的国家({
图像样式：{
宽度：图像大小，
高度：图像大小，
},
});
},
渲染：函数（）{
var imageStyle=this.state.imageStyle；
var图像=[]；
对于（var i=0；i

我发现，如果要将图像显示为带参数的正方形（每行图像），可以通过测量容器来实现，而不是使用“最大高度”、“最大宽度”方法。这可能是下一个最好的办法

var IMAGES_PER_ROW = 3;

var Images = React.createClass({
  getInitialState: function() {
    return {
      imageStyle: {},
    };
  },

  onContainerLayout: function(e) {
    var layout = e.nativeEvent.layout;
    var containerWidth = layout.width;
    var imageSize = containerWidth / IMAGES_PER_ROW;
    this.setState({
      imageStyle: {
        width: imageSize,
        height: imageSize,
      },
    });
  },

  renderImages: function() {
    var imageStyle = this.state.imageStyle;

    var images = [];
    for (var i = 0; i < this.props.imageURLs; i++) {
      var imageURL = this.props.imageURLs[i];
      images.push(
        <View key={imageURL} style={imageStyle}>
          <Image source={imageURL} style={[styles.image, imageStyle]} />
        </View>
      );
    }

    return images;
  },

  render: function() {
    return (
      <View onLayout={this.onContainerLayout} style={styles.container}>
        {this.renderImages()}
      </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  image: {
    resizeMode: 'contain', // cover works too, see https://facebook.github.io/react-native/docs/image.html#resizemode
  },
});

var图像每行=3；
var Images=React.createClass({
getInitialState:函数（）{
返回{
图像样式：{}，
};
},
OnContainer布局：功能（e）{
var布局=e.nativeEvent.layout；
var containerWidth=布局宽度；
var imageSize=集装箱宽度/每行图像数；
这是我的国家({
图像样式：{
宽度：图像大小，
高度：图像大小，
},
});
},
渲染：函数（）{
var imageStyle=this.state.imageStyle；
var图像=[]；
对于（var i=0；i

我四处查看了一下，如果不手动修补React-Native源代码，您似乎无法在React-Native Remote中获得远程加载的图像的大小，如下所示：如果没有图像的实际大小，实现最大高度和最大宽度变得很困难..2017年7月25日-我还在寻找一种最大宽度：100%类型的解决方案，用于React Native中的响应图像。特别是从网络图像。最新的RN 0.46似乎没有解决方案（），因为网络映像需要应用宽度。您找到Andrew了吗？@jpostdesign：请看下面的答案，这就是我的全部。我四处查看了一下，如果不手动修补React-Native源，您似乎无法在React-Remote中获得远程加载的图像的大小：如果没有图像的实际大小，实现最大高度和最大宽度变得很困难..2017年7月25日-我还在寻找一种最大宽度：100%类型的解决方案，用于React Native中的响应图像。特别是从网络图像。最新的RN 0.46似乎没有解决方案（），因为网络映像需要应用宽度。您找到Andrew的最新更新和最新最佳实践了吗？@jpostdesign：请参阅下面的答案，这就是我的全部内容。