如何布局动态大小的网络图像

Question

我正在尝试渲染各种大小的网络图像（在运行时未知）。在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中，<Image />从不尝试将其尺寸设置为图像的实际尺寸。除非您手动指定，否则它将0保留为0。我无法手动指定某些内容，因为我不知道图像的尺寸。

关于如何在React Native中实现类似于max-height，max-width的图像的任何想法？

Answer 1

我发现如果你想用参数（IMAGE_PER_ROW）将图像显示为正方形，而不是最大高度，最大宽度方法，那么可以通过测量容器来做到这一点。这可能是下一个最好的事情。

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
  },
});