如何在本机中更改<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'
    }
});

这是此代码的结果.

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

我不确定为什么高度风格不起作用.

任何帮助表示赞赏.

Answer 1

我找到了答案.

我设置了它的高度<View/>并放置<FlatList/>在其中<View/>

它解决了这个问题.:)

Answer 2

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

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

Answer 3

添加flexGrow: 0。不要提及高度，当涉及到响应式设计时，设计可能会崩溃

例子 ：

<FlatList
  style={{
    flexGrow: 0,
  }}
  data={data}
  renderItem={({item}) => (
    <View>
      <Text>{item.text}</Text>
    </View>
  )}
/>