美文网首页RN
React Native 键盘挡住输入框解决方法

React Native 键盘挡住输入框解决方法

作者: Volon | 来源:发表于2019-06-21 08:39 被阅读22次
    一、使用ref 选中外层的ScrollView标签

    二、在componentDidMount方法中对键盘进行监听


     // 监听键盘
            this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardDidShow);
            this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardDidHide);
    

    三、监听方法


     //键盘弹起后执行
        keyboardDidShow = (e) => {
            console.log(e)
            this._scrollView.scrollTo({x: 0, y: e.startCoordinates.height, animated: true});
        }
    
        //键盘收起后执行
        keyboardDidHide = () => {
            this._scrollView.scrollTo({x: 0, y: 0, animated: true});
        }
    
    

    四、退出时注销监听


     this.keyboardWillShowListener && this.keyboardWillShowListener.remove();
     this.keyboardWillHideListener && this.keyboardWillHideListener.remove();
    

    相关文章

      网友评论

        本文标题:React Native 键盘挡住输入框解决方法

        本文链接:https://www.haomeiwen.com/subject/wnnjqctx.html