在FlatList中显示图像

Question

我正尝试使用Grid View渲染图像，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纵横比，您只需设置宽度或高度，在样式中将纵横比设置为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，它将是一个很大的正方形，因为您可以使用此处描述的方法

Answer 2

列数

多列只能用horizo​​ntal={false}来渲染

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

渲染项

根据要求设置项目（弹性/宽度/高度）

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>
    )
}