Реакция собственного плоского списка оставляет пустые места для элементов, которые не соответствуют условиям - PullRequest
Новая
       66

Реакция собственного плоского списка оставляет пустые места для элементов, которые не соответствуют условиям

0 голосов
/ 21 марта 2020

Example picture

Первая строка показывает одну карту, потому что элемент, предположительно находящийся там, не соответствует указанному условию. Но я хочу удалить это место и поместить туда следующую карту, которая в данный момент находится на следующей строке. 

{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' }} />}

Нулевое значение просто показывает, что пустое место, есть ли способ полностью удалить это пустое место

1 Ответ

1 голос
/ 21 марта 2020

Вам необходимо отфильтровать ваши данные. В противном случае ваш код создаст пустые представления.

Попробуйте отфильтровать данные следующим образом. Было бы хорошо, если вы переместите этот фильтр logi c из вашего метода рендеринга. 

{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' }} />}
...