如何让 FlatList 填充高度? [英] How to make FlatList fill the height?

问题描述

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 填满屏幕(但保持黄色文本框的高度).

I'd like the red flatList to fill the screen (but keep height of yellow textbox).

我已经在 flatList 上尝试了 flex:1，但它只是让它消失了.

I've tried flex:1 on flatList, but it simply makes it disappear.

推荐答案

FlatList 继承了 ScrollView 的 props，所以 ScrollView 的解决方案是可行的:

FlatList inherits ScrollView's props, so solution for ScrollView will work:

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

这里是上述解决方案的原始 Github 问题.

Here is the original Github issue for above solution.

FlatList 的父视图应该在其样式中具有 flex: 1.

The parental Views of FlatList should have flex: 1 in their style.

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

这篇关于如何让 FlatList 填充高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！