如何动态地布局规模的网络图像

我试图渲染一堆各种尺寸（在运行时未知）的网络图像。在网页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; 
}

而且图像将很好地布局。

在本地做出反应，然而，<Image />从未尝试它的尺寸设置为图像的实际大小。除非你手动指定某些东西，否则它将0除以0。我无法手动指定某些内容，因为我不知道图像的尺寸。

的我怎么能实现类似于最大高度为图像的东西，最大宽度任何想法阵营本土？

来源

2015-12-21 Andrew Rasmussen

我四处张望了一下，似乎你不能在远程加载图像的尺寸远程本土做出反应而无需手动修补反应，天然来源是这样的：https://stackoverflow.com/questions/31654244 /反应本地回收 - 实际图像尺寸而没有图像的实际大小，它实现的事情作为最大高度和最大宽度.. –

2017年7月25日变得困难 - 我m还在React-Native中搜索最大宽度：100％类型的响应图像解决方案。特别是从网络图像。最新的RN 0.46似乎没有解决方案（https://facebook.github.io/react-native/docs/images.html#network-images），因为网络图像需要应用宽度。任何更新和最新的最佳实践，你找到安德鲁？ – jpostdesign

@jpostdesign：看到我的答案在下面，这就是我所拥有的。 –

取而代之的最大高度，最大宽度的方法，我发现，如果你想与参数（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 
    }, 
});

来源

2015-12-21 21:42:03

如何动态地布局规模的网络图像

回答

相关问题