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

react-native 键盘遮挡问题

作者: 李晶晶爱吃鱼 | 来源:发表于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