React Native Make View“拥抱”键盘的顶部 [英] React Native Make View "Hug" the Top of the Keyboard
问题描述
假设我的视图位于屏幕底部的绝对位置。该视图包含文本输入。当文本输入被聚焦时,我希望视图的底部触摸键盘的顶部。
Let's say I have a view that is positioned absolute at the bottom of the screen. This view contains a text input. When the text input is focused, I want the bottom of the view to touch the top of the keyboard.
我一直在搞乱KeyboardAvoidingView,但键盘一直在我的视线上。是否不能使这个位置绝对适用?
I've been messing around with KeyboardAvoidingView, but the keyboard keeps going over my view. Is it not possible to make this work with position absolute?
我可以尝试其他什么方法?谢谢!
What other method can I try? Thanks!
推荐答案
前几天我遇到同样的问题(虽然我有一个复杂的TextInput视图作为孩子)并且想要不仅要聚焦TextInput,而且整个视图要附加到键盘上。最终对我有用的是以下代码:
Few days ago I have the same problem (although I have a complex view with TextInput as a child) and wanted not only the TextInput to be focused but the whole view to be "attached" to the keyboard. What's finally is working for me is the following code:
constructor(props) {
super(props);
this.paddingInput = new Animated.Value(0);
}
componentWillMount() {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.paddingInput, {
duration: event.duration,
toValue: 60,
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.paddingInput, {
duration: event.duration,
toValue: 0,
}).start();
};
render() {
return (
<KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
[...]
<Animated.View style={{ marginBottom: this.paddingInput }}>
<TextTranslateInput />
</Animated.View>
</KeyboardAvoidingView>
);
}
其中[..]你有其他观点。
where [..] you have other views.
这篇关于React Native Make View“拥抱”键盘的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!