Question

我希望它看起来像instagram浏览页面。当我尝试flexWrap：'wrap'时，出现配位错误。下一项没有放在正确的位置。

    _renderItem({ item }) {
        return (
            <TouchableOpacity style={[{marginLeft:5,marginBottom:5},{width:item.width},{height:item.height}]} onPress={() => {console.log(item.key)}}>
                <Image style={[{width:item.width},{height:item.height}]} key={item.key} source={{uri:item.image}} />
            </TouchableOpacity>
        );
    }

    render() {
        const itemData = [
            {key: 'A', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'B', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'}, 
            {key: 'C', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'D', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'E', width: 245, height: 245, image: 'https://via.placeholder.com/245.png'},
            {key: 'F', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'G', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'H', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'I', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'J', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'K', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'L', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'M', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'N', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'O', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'P', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'},
            {key: 'R', width: 120, height: 120, image: 'https://via.placeholder.com/120.png'}
        ];

        return(
            <View style={styles.container}>
                <FlatList
                    contentContainerStyle={{justifyContent: 'center',flexDirection:'row',flexWrap:'wrap'}}
                    data={itemData}
                    renderItem={this._renderItem}
                />
            </View>
        );
    }

Answer 1

在这种情况下，使用可以使用FlastList中的endlocal和numColumns道具。例如：

columnWrapperStyle

如何使用FlatList中的flexWrap正确对齐项目

1 个答案: