这是重现问题的 app.js 的简单要点
我有一个屏幕,其中有一个 FlatList
夹在 Header 和 Footer 组件之间。 FlatList 的行在单击时会变成 TextInputs
。 Flatlist
可以很好地处理此屏幕中的键盘,方法是向上滚动单击的行,使其刚好位于键盘上方。
问题是 Footer 组件出现在键盘上方而不是被覆盖。编辑文本字段时不需要看到页脚,在实际用例中,页眉和页脚要大得多,因此严重限制了可用的屏幕空间。它基本上将文本输入压缩成一个几乎无法使用的小行。
TextInput 未聚焦
TextInput Focused(注意页脚向上推)
如何让键盘覆盖页脚,同时保持 TextInputs 键盘的感知?
最佳答案
作为解决方法,直到我找到正确的答案,如果它存在 :(,我决定附加键盘监听器并有条件地呈现页脚。所以基本上如果键盘关闭,则呈现页脚,否则不呈现页脚。它工作得相当好,从渲染到不渲染时会出现图形闪烁,这不是最好的,但比我拥有的无法使用的替代方案要好。我也许能找到某种方法来消除这种情况。
有点hack,但现在可以用了!
注意:键盘监听器不适用于 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>
);
}
}
关于javascript - 当文本输入聚焦时,如何避免将 View 向上推并覆盖它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50979792/