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
,但它只是使其消失了。
答案 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>