React Native获取组件位置和大小

最新推荐文章于 2022-07-05 08:42:07 发布

V_Lute

最新推荐文章于 2022-07-05 08:42:07 发布

阅读量888

点赞数

分类专栏： react native 文章标签： reactnative 组件位置组件大小屏幕变化

本文链接：https://blog.csdn.net/Broken_Wave/article/details/102902436

版权

react native 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在React Native中获取组件位置和大小的三种方法：onLayout事件属性、measure方法以及使用UIManager的measure方法。特别是在iPad的横竖屏切换场景下，建议将获取方法封装为函数并在componentDidMount及Dimensions的change事件中调用，以适应屏幕变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. onLayout事件属性

// 在元素上设置onLayout属性
<View onLayout={this._onLayout}><View>

_onLayout = (e) => {
	let {x,y,width,height} = e.nativeEvent.layout
}

2.measure方法

// 建议使用函数方式设置ref，否则可能会出一些奇怪的错误
<View ref={(ref) => this.ref_view = ref}></View>

// 这里加一个延时，相当于放入异步执行队列，时长不重要
componentDidMount(){
   setTimeOut(() => {
     this.ref_view.measure((x,y,width,height,pageX, pageY) => {
       //todo
       })
   });
}

3. 使用UIManager measure方法

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

// ref属性参考方法二设置
onClick = () => {
	UIManager.measure(findNodeHandle(this.buttonRef),                
      (x,y,width,height,pageX,pageY)=>{
		// todo
    })	
}

对于ipad的横竖屏旋转，建议将获取位置的方法抽取成函数，然后在componentDidMount及Dimensions的change事件里调用

import {Dimensions} from 'react-native'

componentDidMount() {
    Dimensions.addEventListener('change', this.handleDimensions);
    setTimeout(() => {
     this.getPosition();
    }, 100);
 }

 handleDimensions(dims) {
    if (isIpad) {
      this.getPosition();
    }
  }