React Native获取组件在屏幕上的绝对位置(包括自定义组件)

react native 组件要获取组件在当前屏幕上的绝对位置一般都是通measure


方法如下:

<View ref = "ref1"/>

ref1.measure((frameX, frameY, frameWidth, frameHeight, pageX, pageY) => {
      //pageX,pageY就是绝对位置      

});

但这个如果组件是自定义组件话就会找不报找不到measure函数,这个问题一切困扰着我,目前我只找到另一种替代方法,至于为什么我没有时间去深究。

下面就是给个更加通用解决方案

<MyComponent onLayout={(e)=>this._onLayout(e)}/>

//import {NativeModules} from 'react-native';

_onLayout = (e) =>{

        NativeModules.UIManager.measure(e.target, (x, y, width, height, pageX, pageY) => {
            this.currentPosY = pageY;

            // pageY是组件在当前屏幕上的绝对位置
            console.log(x,y);
            console.log(pageX,pageY);
        });

}

e是事件源对象,一般的事件都这个对象,比如onFoucs,onBlur,onLayout之类的。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值