Comment changer la hauteur de <FlatList /> en React Native?

Question

Je souhaite modifier la largeur et la hauteur de <FlatList />.

J'ai défini le style height sur le <FlatList /> Actuel mais cela n'a jamais fonctionné.

Je ne peux en aucun cas modifier la hauteur de <FlatList />.

Ceci est ma fonction et mes styles render().

    render() {
        const listData = [];
        listData.Push({ key: 0 });
        listData.Push({ key: 1 });
        listData.Push({ key: 2 });
        listData.Push({ key: 3 });
        listData.Push({ key: 4 });
        return (
            <View style={styles.container}>
                <FlatList
                    data={listData}
                    renderItem={({item}) => {
                        return (
                            <View
                                style={{
                                    width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
                                }}
                            />
                        )
                    }}
                    horizontal
                    style={styles.flatList}
                />
            </View>
        );
    }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    flatList: {
        height: 50,
        backgroundColor: 'red'
    }
});

Et c'est le résultat de ce code.

J'ai trouvé les réponses pendant plusieurs heures mais rien ne m'a aidé.

Je ne sais pas pourquoi le style de hauteur ne fonctionne pas.

Toute aide est appréciée.

Answer 1

J'ai trouvé la réponse.

J'ai réglé la hauteur de <View/> et placé <FlatList/> à l'intérieur <View/>

Cela a résolu le problème. :)

Answer 2

FlatList a prop contentContainerStyle. Vous pouvez l'utiliser pour styliser le wrapper autour de FlatList. FlatList hérite de cet accessoire de ScrollView lire entendre

Answer 3

ajouter flexGrow: 0 au style flatList a fonctionné pour moi, donc ce sera:

flatList: {
  height: 50,
  backgroundColor: 'red',
  flexGrow: 0
}