如何使 FlatList 填充高度？答案

【问题标题】：How to make FlatList fill the height?如何使 FlatList 填充高度？
【发布时间】：2019-02-16 13:55:49
【问题描述】：

import React from 'react';
import {SafeAreaView, KeyboardAvoidingView, FlatList, View, Text, TextInput, Button, StyleSheet } from 'react-native';


export default class Guest extends React.Component {
    state={
        command: '',
    }
    constructor(props) {
        super(props)
        this.onChangeText = this.onChangeText.bind(this)
        this.onKeyPress = this.onKeyPress.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onChangeText(text){
        const command = text.replace('\n', '');
        this.setState({
            command: command
        })
    }
    onKeyPress(e){
    }
    onSubmit(){
    }
    render() {
        return(
            <SafeAreaView style={styles.safeAreaView}>
                <KeyboardAvoidingView style={styles.keyboardAvoidingView} keyboardVerticalOffset={88} behavior="padding" enabled>
                    <FlatList
                        inverted={true}
                        keyboardShouldPersistTaps='always'
                        keyboardDismissMode='interactive'
                        ref='list'
                        style={styles.flatList}
                        data={[1, 2, 3]}
                        renderItem={(props) => {
                            return(<View><Text>{props.item}</Text></View>)
                        }}
                    />
                    <TextInput
                        command={this.state.command}
                        onChangeText={this.onChangeText}
                        onKeyPress={this.onKeyPress}
                        onSubmit={this.onSubmit}
                        style={styles.textInput}
                    />
                </KeyboardAvoidingView>
            </SafeAreaView>
        )
    }
}


const styles = StyleSheet.create({
    safeAreaView:{
        backgroundColor:"#ffffff",
    },
    keyboardAvoidingView:{
    },
    flatList:{
        backgroundColor: 'red',
    },
    textInput:{
        backgroundColor: 'yellow'
    }
})

我希望红色 flatList 填满屏幕（但保持黄色文本框的高度）。

我在 flatList 上尝试过flex:1，但它只是让它消失了。

【问题讨论】：

您可以简单地使用Dimensions component 来处理每个不同手机尺寸的高度，只需更新styles of flatlist 看起来像flatList:{backgroundColor: 'red', height: Dimensions.get('window').height*0.8} Dimensions.get('window').height* 0.8 表示您使用了手机屏幕高度的 80%

标签： react-native

【解决方案1】：

FlatList 继承了 ScrollView 的 props，所以 ScrollView 的解决方案可以工作：

<FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    {...otherProps}
/>

Here 是上述解决方案的原始 Github 问题。

编辑：FlatList 的父视图应该有flex: 1 的样式。

safeAreaView:{
    backgroundColor:"#ffffff",
    flex: 1
},
keyboardAvoidingView:{
    flex: 1
},

【讨论】：

不适合我，我在 View 中有一个 FlatList，View 有 flex: 1 和 FlatList flexGrow: 1，但不工作。任何想法？那些 safeAreaView 和 keyboardAvoidingView 是什么？
所有的父母都必须是 flex: 1

【解决方案2】：

使用 flex 的属性样式：

render() {
    return (
            <View style={{ flex: 1 }}>

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

            </View>
    )

}

【讨论】：

您是否介意更新您的答案以提供更多关于您正在做什么的解释，以及为什么这可能比两年前接受的答案更可取？
当然，我有一个包含 30 多个元素的列表，问题是底部的滚动然后我尝试将属性 "contentContainerStyle={{ flexGrow: 1 }}" 添加到 FlatList 但是它没有用。然后我将添加到中，并将属性“style={{ flex: 1, width: "100%" }}” 添加到视图中，现在我可以访问列表的底部了。

【解决方案3】：

您也可以在 flatList 样式中添加高度或将 flatlist 放在视图中，然后为视图添加 flex

【讨论】：

【解决方案4】：

就我而言，问题出在虚拟键盘上。当我打开另一个页面时。然后键盘突然消失。它会导致页面的一部分就像有人剪切或清理它一样。所以解决方案是在推送包含 flatlist 的页面之前先关闭键盘，然后导航到新页面

【讨论】：

【解决方案5】：

无需在列表中添加父母视图，只需：

render() {
    return <FlatList style={{width: '100%', height: '100%'}}
               {...others}
               />;
}

【讨论】：

【解决方案6】：

我尝试了对此问题的所有回复，但没有一个有效。我所做的是将 Parent 添加到 FlatList ，然后给它一个样式：

SCREEN_HEIGHT 来自Dimensions.get('window')

你必须像这样从“react-native”导入：从“react-native”导入 { 维度 } 完整示例：

<View style={{ height: SCREEN_HEIGHT}}>
  <FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    keyExtractor={item => item.name}
    numColumns={1}
    data={this.state.dataList}
    renderItem={({ item, index }) =>
      this._renderItemListValues(item, index)
    }
   />
  </View>

【讨论】：