React Native 平面列表为不匹配条件的项目留下空白空间

Question

第一行显示一张卡片，这是因为假设存在的项目与所述条件不匹配。但我想删除这个空格，并将当前位于下一行的下一张卡放在那里。

{state.data ? <FlatList
                data={state.data}

                renderItem={({ item }) => {
                    console.log(item)
                    return (
                        <View style={{ justifyContent: 'space-evenly', marginHorizontal: 0 }}>
                           <View>

                                {item.available == 1 ?
                                    <TouchableOpacity activeOpacity={.8} onPress={() => navigation.navigate('Appointment', { id: item.id, name: item.name, phone: item.phone, email: item.email, session: item.session, player_id: item.player_id, picture: item.picture })} >
                                        <Card style={{ width: width / 2.05, alignItems: 'center', justifyContent: 'center', borderRadius: 15, paddingTop: 10, height: height / 2.4 }}>
                                            <CardItem cardBody>
                                                <Image
                                                    source={{ uri: 'http://example.com/storage/' + item.picture }}
                                                    style={{ height: 200, width: null, flex: 1 }}
                                                />
                                            </CardItem>
                                            <CardItem>
                                                <Text> {item.name} </Text>
                                            </CardItem>
                                        </Card>
                                    </TouchableOpacity>
                                    :   null}


                            </View> 

                        </View>

                    )
                }}
                numColumns={2}

            /> : <ActivityIndicator size="large" style={{ alignItems: 'center', justifyContent: 'center', flex: 1, flexDirection: 'row' }} />}

null值只是说明了空的空间，有没有办法完全去掉这个空的空间呢？

Answer 1

您需要过滤您的数据。否则，您的代码将创建空视图。

尝试按如下方式过滤您的数据。如果您将这个过滤器逻辑从渲染方法中移走，那就太好了。

{state.data ? <FlatList
        data={state.data.filter(item => item && item.available === 1)}

        renderItem={({ item }) => {                
            return (
                <View style={{ justifyContent: 'space-evenly', marginHorizontal: 0 }}>
                   <TouchableOpacity activeOpacity={.8} 
                   onPress={() => navigation.navigate('Appointment', { id: item.id, name: item.name, phone: item.phone, email: item.email, session: item.session, player_id: item.player_id, picture: item.picture })} >
                        <Card style={{ width: width / 2.05, alignItems: 'center', justifyContent: 'center', borderRadius: 15, paddingTop: 10, height: height / 2.4 }}>
                            <CardItem cardBody>
                                <Image
                                    source={{ uri: 'http://example.com/storage/' + item.picture }}
                                    style={{ height: 200, width: null, flex: 1 }}
                                />
                            </CardItem>
                            <CardItem>
                                <Text> {item.name} </Text>
                            </CardItem>
                        </Card>
                    </TouchableOpacity>

                </View>

            )
        }}
        numColumns={2}
    /> : <ActivityIndicator size="large" style={{ alignItems: 'center', justifyContent: 'center', flex: 1, flexDirection: 'row' }} />}