Question

我正在尝试使用FlatList在网格视图中渲染图像，但是遇到了下一个问题：

我的代码段：

...
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应该根据item自己计算numColumns的宽度，对吗？因此，在Image中，我应该仅指定高度。由于我想渲染正方形图像，因此我给高度分配了一个等于Dimensions.get('window').width/3的值，其中3是numColumns的值。

之后，FlatList呈现空白而不是图像。

如果我将width属性添加到Image（如我的代码片段中）并将其定义为高度（正方形图像，还记得吗？），那么FlatList会渲染3列带有正方形图像的列，但它们显示为在我的草图上（两个完整的图像，最后一列被剪切）：

如何显示三个完整的列？

Answer 1

您想要简单的正方形吗？，好的，那么您应该知道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

Answer 2

numColumns

只能使用horizontal = {false}

呈现多列

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

renderItem

根据要求设置项目（弯曲/宽度/高度）

renderItem(item) {
    return (
        <TouchableOpacity>
            <View style={{
                width: (Constant.SCREEN.width - 32) / 3,
                height: (Constant.SCREEN.width - 32) / 3,
                justifyContent: 'center'
            }}>
                <Image style={{ width: '70%', height: '70%', alignSelf: 'center' }} resizeMode='contain' source={{ uri: item.image }}></Image>
                <SPText
                    style={{ flex: 1.0, textAlign: 'center', marginLeft: 4, marginRight: 4 }}
                    text={item.text}
                    fontSize={10}
                    textColor='white' />
            </View>
        </TouchableOpacity>
    )
}

Answer 3

使用图像的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是图像的两倍。

在FlatList中显示图像

3 个答案: