如何在 React Native 中更改 <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

FlatList 具有属性 contentContainerStyle。您可以使用它来设计 FlatList 周围的包装器样式。 FlatList 继承自 ScrollView read hear

Answer 3

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

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

Answer 4

根据数据给出宽度然后高度

 <View style={{maxHeight:"50%",width:"60%"}}>
       <FlatList
            data={this.props.data}
            renderItem={({ item }) => <Text>{item.name}</Text>}
            keyExtractor={(item, index) => index}
        />
 </View>

Answer 5

<View style={styles.flatList}>
   <FlatList
      keyExtractor = { this.keyExtractor }
      data = { this.getPOs() }
      ListEmptyComponent = { this.renderEmpty }
      ItemSeparatorComponent = { Separator }
      renderItem = { this.renderItem }
   />
</View>

对我来说，将 flex: 1 添加到视图中

const styles = StyleSheet.create({
    flatList: {
        flex: 1,
    }
})

Answer 6

添加flexGrow: 0。别提高度了，响应式的时候设计可能会崩溃

示例：

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

Answer 7

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: {
        height:100
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    flatList: {
        backgroundColor: 'red'
    }
});

Answer 8

您可以将 flexGrow: 0 添加到适合我的 flatList 样式，这样它将是：

  <FlatList
   {...{otherProps}}
    style={{
      height: 50,
      backgroundColor: 'red',
      flexGrow: 0
    }}
    />

如何在 React Native 中更改 <FlatList/> 的高度？

How to change height of <FlatList/> in react native?

react-native

react-native-flatlist