javascript - 如何制作包含 2 列的图片库

Question

我正在尝试遍历对象数组，我希望它们打印在 2 列上，但我将它们打印在每一行

下面是如何打印图像的屏幕截图，但我希望它们在同一行

这是 ArtObject 组件，我认为应该在其中进行一些修改

export class ArtObjectCard extends Component<Props> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View
                style={{
                    height: 240,
                    margin: 10,
                    flexDirection:"column",
                }}
            >
                <View
                    style={{
                        borderRadius: 10,
                        width: this.props.width ? this.props.width : screenWidth / 2 - 20,
                        height: this.props.height ? this.props.height : 200,
                        backgroundColor: "#fff",
                        shadowColor: "#999",
                        shadowOpacity: 0.3,
                        shadowRadius: 5,
                        shadowOffset: {
                            height: 1,
                            width: 0
                        }
                    }}
                >
                    <Image
                        borderRadius={10}
                        source={this.props.image}
                        style={{
                            width: this.props.width ? this.props.width : screenWidth / 2 - 20,
                            height: this.props.height ? this.props.height : 200,
                            resizeMode: "cover"
                        }}
                    />




                    <Text
                        style={{
                            width: 150,
                            fontSize: 12,
                            color: "#bbb",
                            marginTop: 5,
                            marginBottom: 10
                        }}
                    >

                    </Text>

                </View>
            </View>
        );
    }
}

我在渲染方法中调用 ArtObject 组件

    renderItem = ({item, index}) => {

        if (!item) {
            return null
        }


        return (
            <View >
                <ArtObjectCard
                    title={item.title}

                    image={{uri: item.image}}

                    onClickButton={()=>{this._onPressItem(item)}}
                />

            </View>
        );
    }




    render(){
        const { search } = this.state;


        return (

            <View style={{flex: 1}}>

                <SearchBar
                    placeholder="Type something here...."
                    onChangeText={this.updateSearch}
                    value={search}
                />

                <FlatList
                    data={this.state.objects}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}

                />
            </View>
        );
    }

编辑1：

在平面列表中添加 numColumns={2} 后，它仅在我有 2 个以上的图像要显示时才有效。如果我只有 2 张图像，它将是一个空白屏幕

标签： javascriptreactjsreact-nativeuser-interface