美文网首页
react-native 键盘遮挡问题

react-native 键盘遮挡问题

作者: 馒头hc | 来源:发表于2018-01-25 13:11 被阅读0次

    import {

        ......

        ScrollView,  // 引入相关组件

        Keyboard,

    } from 'react-native';

    // 监听键盘弹出与收回

    componentDidMount() {

            this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow',this.keyboardDidShow);

            this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide',this.keyboardDidHide);

        }

    //注销监听

    componentWillUnmount () {

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

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

        }

    //键盘弹起后执行

    keyboardDidShow = () =>  {

            this._scrollView.scrollTo({x:0, y:100, animated:true});

        }

    注:这里的y值自行调整向上偏移量

    //键盘收起后执行

    keyboardDidHide = () => {

            this._scrollView.scrollTo({x:0, y:0, animated:true});

        }

    ///在最外层

    this._scrollView=component} scrollEnabled={false}

                            keyboardShouldPersistTaps={true}>

          ...... // 其他组件代码

    PS:可通过rn自带api收起键盘Keyboard.dismiss()

    相关文章

      网友评论

          本文标题:react-native 键盘遮挡问题

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