如何使FlatList填充高度?

时间:2018-09-12 02:04:01

标签: react-native

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

enter image description here

我希望红色的FlatList填充屏幕(但保持黄色文本框的高度)。

我在flatList上尝试过flex:1,但它只是使其消失了。

6 个答案:

答案 0 :(得分:3)

FlatList继承了ScrollView的道具,因此ScrollView的解决方案将起作用:

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

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

编辑:FlatList的家长视图的样式应为flex: 1

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

答案 1 :(得分:1)

您还可以以flatList样式添加高度或将Flatlist放置在视图中,然后为视图添加flex

答案 2 :(得分:0)

就我而言,问题出在虚拟键盘上。当我打开另一个页面时。然后键盘突然关闭。并导致页面的一部分像有人对其进行切割或清洁一样。因此解决方案是在推送包含平面列表的页面之前先关闭键盘,然后导航到新页面

答案 3 :(得分:0)

使用属性样式和flex:

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

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

            </View>
    )

}

答案 4 :(得分:0)

只需将父母视图添加到列表中即可,

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

答案 5 :(得分:0)

我尝试在此问题上做出所有回应,但没有一个起作用。 我要做的是将一个Parent添加到FlatList,然后给它一个样式: <视图样式= {{高度:SCREEN_HEIGHT}}>

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>