react native 键盘遮挡输入框的问题

1.在写react native时会碰到弹起的键盘遮挡住输入框的问题

官网给出了解决方案:https://reactnative.cn/docs/keyboardavoidingview#docsNav

keyboardavoidingview可以解决这个问题

需要给参数behavior={"position/height/padding"}

keyboardVerticalOffset给值一般是给键盘的高度

2.rn获取键盘高度方法

import { Keyboard } from 'react-native';
    keyboardDidShowListener;
    keyboardDidHideListener;
    componentWillMount(){
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',         
        this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', 
        this._keyboardDidHide.bind(this));
    }
    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        //this.keyboardDidHideListener.remove();
    }
    _keyboardDidShow(e){
        const { getKeyBoardHeight } = this.props;
        getKeyBoardHeight && getKeyBoardHeight(e.endCoordinates.height);
        this.setState({
            keyboardHeight:e.endCoordinates.height
        })
    }
    _keyboardDidHide(e){
         this.setState({
             keyboardHeight:0
         })
     }

这里监听键盘弹起时返回的对象里,endCoordinates 和 startCoordinates的区别是?
3.接下来又出现显得问题,在页面偏下的输入框可以被顶起看可视区内,但是在页面顶部的输入框可能就被顶出可视区外了。所以这里又需要判断输入框在页面的位子了。根据输入框在页面的位子设置keyboardVerticalOffset的值。

但是也有遇到设置keyboardVerticalOffset为0不生效的情况,此时可以禁用keyboardavoidingview  enabled = true;

import {NativeModules, findNodeHandle } from 'react-native';
const UIManager = NativeModules.UIManager;

UIManager.measure(findNodeHandle(ref),(x,y,width,height,pageX,pageY)=>{
     console.log(x,y,width,height,pageX,pageY,clientHeight)
                    
})

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值