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

【问题标题】：How to change height of <FlatList/> in react native?如何在反应原生中改变 <FlatList/> 的高度？
【发布时间】：2018-05-11 23:45:36
【问题描述】：

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

这是这段代码的结果。

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

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

感谢任何帮助。

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

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

【讨论】：

不允许滚动

【解决方案2】：

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

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

【讨论】：

这比用视图组件装箱整个平面列表更好。

【解决方案3】：

FlatList 有道具 contentContainerStyle。您可以使用它来设置 FlatList 周围的包装器样式。 FlatList 从 ScrollView 继承这个 prop read hear

【讨论】：

【解决方案4】：

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

例子：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

<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,
    }
})

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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'
    }
});

【讨论】：

在您的答案中添加解释会对其他人更有用。