Как изменить высоту <flatlist/"> в реакции родной?

Я хочу изменить ширину и высоту <FlatList/>.

Я установил стиль height для текущего <FlatList/> но он никогда не работал.

Я не могу изменить высоту <FlatList/> никоим образом.

Это моя функция 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'
    }
});

И это результат этого кода.

Current result

Я нашел ответы на несколько часов, но мне ничего не помогло.

Я не уверен, почему стиль высоты не работает.

Любая помощь приветствуется.

ОТВЕТЫ

Ответ 1

Я нашел ответ.

Я установил высоту <View/> и разместил <FlatList/> внутри <View/>

Он решил проблему. :)

Ответ 2

FlatList имеет реквизит contentContainerStyle. Вы можете использовать его для создания стиля оболочки вокруг FlatList. FlatList наследуют эту опору от ScrollView чтения услышать

Ответ 3

добавление flexGrow: 0 к стилю flatList сработало для меня, так что это будет:

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