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屋！