javascript - React Native Make View "Hug"键盘顶部

Question

假设我有一个绝对定位在屏幕底部的 View 。该 View 包含一个文本输入。当文本输入获得焦点时，我希望 View 的底部触及键盘的顶部。

我一直在摆弄 KeyboardAvoidingView，但键盘一直在我的 View 上移动。不能使这个与绝对位置一起工作吗？

我还可以尝试其他什么方法？谢谢!

Answer 1

几天前，我遇到了同样的问题(尽管我小时候有一个复杂的 TextInput View )并且不仅希望 TextInput 成为焦点，而且希望整个 View “附加”到键盘。最终对我有用的是以下代码:

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>
        );
    }

[..] 你有其他观点。