フラットリストに画像を表示します

Question

FlatListbutが次の号に直面して、グリッドビューで画像をレンダリングしようとしています。

私のコードスニペット：

_...
renderItem = ({item}) => {
        return (
        <Image source = {{uri: item.photoUrl[0].photoUrl}} style = {{margin: 1,
                                                                    height: Dimensions.get('window').width / 3,
                                                                    width: Dimensions.get('window').width / 3,
                                                                    resizeMode: 'cover'}}
        />
    )
}

render() {
    if(this.props.viewOption === 'grid') {
        return <FlatList
                    data = {this.state.photosKeysArray}
                    keyExtractor={(item, index) => item.id}
                    numColumns = {3}
                    renderItem={this.renderItem}
                />
    } ...
_

問題は、フラットリストがitem、右に応じてnumColumnsの幅を算出する必要があるということです。そのため、Imageすなわち高さだけを指定する必要があります。正方形の画像をレンダリングしたいので、値がDimensions.get('window').width/3の値に割り当てます。ここで、_3はnumColumnsの値です。

そのフラットリストの後、画像の代わりに空白のスペースをレンダリングします。

widthプロパティをImage（コードスニペットのように）を追加し、高さ（正方形のイメージ、覚えておいてください。）次に、FlatListは正方形の画像で3つの列をレンダリングしますが、ONのように表示されます。私のスケッチ（2つのフル画像と最後の列がカットされています）：

3つのフルカラムを表示する方法

Answer 1

この問題は、画像のwidthとheightの次の値を使用して解決されました。

height: (Dimensions.get('window').width - (30 + 2*this.state.columns)) / this.state.columns,
width: (Dimensions.get('window').width - (30 + 2*this.state.columns)) / this.state.columns,
 _

どこ 30メイン画面の2倍（左右）マージンと2は画像の二重マージンです。