reactjs - 在 FlatList 中显示图像

Question

我正在尝试使用 FlatList 在 GridView 中渲染图像，但遇到了下一个问题:

我的代码片段:

...
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}
                />
    } ...

问题是FlatList应该根据numColumns自行计算item的宽度，对吧？所以在 Image 中我应该只指定高度。由于我想渲染方形图像，因此我为高度分配了一个等于 Dimensions.get('window').width/3 的值，其中 3 是 的值>列数。

之后 FlatList 渲染空白而不是图像。

如果我将 width 属性添加到 Image (就像在我的代码片段中一样)并将其定义为高度(正方形图像，还记得吗？)，那么 FlatList 会呈现 3 列正方形图像，但它们的显示方式就像我的草图一样(两张完整图像，最后一列被剪切):

如何显示完整的三列？

Answer 1

你想要简单的方 block 吗？ ，那么你应该知道react native有这个属性，它叫Aspect Ratio ，你只需设置宽度或高度，将样式中的长宽比设置为 1，你就得到了一个正方形。

这保持不变

<FlatList
   numColumns={3}
   data={this.state.data}
   renderItem={({ item }) => this.renderItem(item)}
/>

但这更简单

renderItem(item) {
    return (
        <TouchableOpacity  
                 style={{flex:1/3, //here you can use flex:1 also
                 aspectRatio:1}}>
                <Image style={{flex: 1}} resizeMode='cover' source={{ uri:  item.photoUrl[0].photoUrl}}></Image>
        </TouchableOpacity>
    )
}

应该注意的是，如果你在所有行下面有一个额外的项目，并且你使用 flex:1 而不是 flex:1/3 ，它将是一个很大的、非常大的正方形，因为你可以使用所描述的方法here