react-native 键盘遮挡问题

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 键盘遮挡问题)