React Native获取组件位置和大小

最新推荐文章于 2024-07-16 21:36:00 发布

转载最新推荐文章于 2024-07-16 21:36:00 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiuyi/p/10536924.html

文章标签：

#javascript #数据库 #ViewUI

本文详细介绍在React Native(RN)开发中，如何通过多种方法获取页面元素的大小和位置信息，包括使用Dimensions API获取屏幕尺寸，利用onLayout事件及UIManager的measure方法测量元素，以及在组件挂载后进行精确测量的技巧。

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

RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法

获取设备屏幕的宽高

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

获取元素的大小和位置信息
1. onLayout事件属性

<View onLayout={this._onLayout}><View>

_onLayout = (e) => {
    let {x,y,width,height} = e.nativeEvent.layout
}
// or
import {NativeModules} from 'react-native'
_onLayout = (e) => {
     NativeModules.UIManager.measure(e.target, (x, y, width, height, pageX, pageY)=>{
         // todo
    })
}

x和y表示左上角的顶点坐标，相对于屏幕的左上角（0，0）

2. 元素自带measure方法
在元素上添加ref

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

在componentDidMount方法里添加一个定时器，定时器里再进行测量，否则拿到的数据为0

componentDidMount(){
   setTimeOut(() => {
     this.refs.chatView.measure((x,y,width,height,pageX, pageY) => {
       //todo
       })
   });
}

3. 使用UIManager measure方法

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

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

在组件上添加引用

<TouchableButton ref={(ref)=>this.buttonRef=ref} onPress={this.handleClick}/>

转载于:https://www.cnblogs.com/jiuyi/p/10536924.html