Reactnative React Native 使视图 Hug键盘顶部

发布于03月09日

假设我有一个绝对位于屏幕底部的视图.此视图包含文本输入.当文本输入被聚焦时，我希望视图的底部接触键盘的顶部.

我一直在摆弄键盘AVOIDGVIEW，但键盘一直在我的视图上.用绝对位置做这项工作是不可能的吗？

我还可以try 什么方法？谢谢

推荐答案

几天前，我也遇到了同样的问题(尽管我小时候对TextInput有一个复杂的视图)，我不仅希望TextInput能够集中，而且希望整个视图都能"连接"到键盘上.最终对我有用的是以下代码:

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

在哪里你还有其他看法.