当文本输入聚焦时，如何避免将视图向上推送并覆盖它？
这里有一个app.js的简单要点来重现这个问题
我有一个屏幕，其中有一个FlatList夹在页眉和页脚组件之间。FlatList有一些行，单击这些行时，它们会变成TextInputs。Flatlist可以很好地处理这个屏幕中的键盘，方法是滚动点击的行，使其就在键盘的上方。
问题是，页脚组件是在键盘上方提出来的，而不是被覆盖的。在编辑文本字段时，没有必要看到页脚，在实际用例中，页眉和页脚要大得多，因此严重限制了可用的屏幕不动产。它基本上将文本输入压缩到一个很小的行中，这几乎是不可用的。
TextInput UnFocused
TextInput聚焦(注意，页脚向上推)
我如何使键盘覆盖在页脚之上，同时保持TextInputs键盘的警觉？
回答 3
Stack Overflow用户
发布于 2018-06-22 17:33:06
作为一个解决办法，直到找到正确的答案，如果它存在:(，我决定附加键盘侦听器和有条件地呈现页脚。因此，基本上，如果键盘关闭，则显示页脚，如果没有，则显示页脚。它运行得相当好，有一个图形闪烁，因为它从呈现到不呈现，这不是最好的，但它比我有无法使用的替代方案。我也许能在某个时候找到一些方法来解决这个问题。
有点黑，但现在起作用了！
注意:键盘侦听器不适用于android:windowSoftInputMode="adjustNothing"，但它们适用于adjustResize，这是我无论如何都需要使用的。
下面是修改后的代码部分：
export default class App extends Component {
constructor(props){
super(props);
this.state={
showFooter: true
}
}
RenderFooter(){
if(this.state.showFooter){
return(
<View style={styles.footerContainer}>
<Text style={styles.headerText}>
Footer
</Text>
</View>
)
} else {
return null
}
}
componentWillMount(){
this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
}
componentWillUnmount() {
this.keyboardDidShowSub.remove();
this.keyboardDidHideSub.remove();
}
keyboardDidShow = (event) => {
console.log('keyboardDidShow')
this.setState({
showFooter: false
})
};
keyboardDidHide = (event) => {
console.log('keyboardDidHide')
this.setState({
showFooter: true
})
};
render() {
return (
<View style={styles.container}>
{this.RenderHeader()}
<FlatList
data={data}
renderItem={({item}) => (
<ListItem
item = {item}/>
)}
extraData={this.state}
keyExtractor={item => item.name}/>
{this.RenderFooter()}
</View>
);
}
}Stack Overflow用户
发布于 2018-06-22 04:20:25
在Android系统中，我们的布局将是自动调整大小，如果键盘出现，它不会发生在IOS中。
要解决这个问题，可以将AndroidManifest.xml中的AndroidManifest.xml更改为adjustNothing
Stack Overflow用户
发布于 2021-04-22 03:52:09
尝试在父级中使用scrollview，但使其受到固定高度和宽度视图的限制，因此它显示为静态屏幕，而不是滚动视图，
在Scrollview中，您可能有平面列表+ Textinput
也可以将平面表固定到一个高度
ScrollView -高度100%但固定，不应该滚动平面- 80%高TextInput - 20%高。
https://stackoverflow.com/questions/50979792
复制相似问题
腾讯云开发者
