RN页面获取组件位置和大小的方法

最新推荐文章于 2023-05-20 17:18:42 发布

weixin_30810239

最新推荐文章于 2023-05-20 17:18:42 发布

阅读量658

点赞数

版权

在RN的页面布局和操作中，有时需要获取元素的大小和位置信息，本文从网上抄袭了几个常用方法，以备不时之需。
首先是获取设备屏幕的宽高

import {Dimensions} from 'react-native';
var {height, width} = Dimensions.get('window');

下面介绍获取普通元素的大小和位置信息的方法
方法一：onLayout 事件属性

_onLayout(event){
    let {x,y,width,height} = e.nativeEvent.layout
}
....
<View onLayout={(e) => this._onLayout}></View>

当组件重新渲染时，该方法就能重新获取到元素的宽高和位置信息，但是有时组件并没有重新render那么就获取不到正确的值，例如页面滚动，但是state没有发生变化，组件也就没有重新渲染。

方法二：元素自带measure方法
首先给元素添加上ref

<View ref={(view) => this.myView = view}></View>

然后需要注意的是需要在componentDidMount方法里面添加一个定时器，定时器里面再进行测量，否则拿到的数据都为0.

componentDidMount(){
    setTimeOut(() => {
      this.myView.measure((x,y,widht,height,left,top) => {
        //todo
        })
    });
}

实际使用过程中我发现这个方法在自定义的组件上会失效，只能应用在RN自带的View等组件上，使用时需要注意一下。

方法三：使用UIManager measure方法
首先引入

import {
    UIManager,
    findNodeHandle
} from 'react-native';

再给组件加上引用

<MyComponent  ref={(ref)=>this.myComponent=ref} />

最后测量

 UIManager.measure(findNodeHandle(this.myComponent),(x,y,width,height,pageX,pageY)=>{
                //todo
            })

转载于:https://www.cnblogs.com/star91/p/RN-ye-mian-huo-qu-zu-jian-wei-zhi-he-da-xiao-de-fa.html

关注