如何在反应原生中改变 <FlatList/> 的高度？

Question

我想改变 <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'
    }
});

这是这段代码的结果。

我找到了几个小时的答案，但没有任何帮助。

我不确定为什么高度样式不起作用。

任何帮助表示赞赏。

原文由 ppianist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 flexGrow: 0 添加到对我有用的 flatList 样式中，所以它将是：

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

原文由 Mr.Jerry. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

设置 <View/> 的高度并将 <FlatList/> 放在里面 <View/>

原文由 ppianist 发布，翻译遵循 CC BY-SA 4.0 许可协议