如何動態地佈局規模的網絡圖像

我試圖渲染一堆各種尺寸（在運行時未知）的網絡圖像。在網頁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

如何動態地佈局規模的網絡圖像

回答

相關問題