ReactNative获取组件位置和⼤⼩RN页⾯中定位或滚动操作时，需要获取元素的⼤⼩和位置信息，有⼏种常⽤的⽅法
获取设备屏幕的宽⾼
import{Dimensions}from'react-native';
var{height, width}= ('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)=>{
asure(e.target,(x, y, width, height, pageX, pageY)=>{reactnativeui框架
// todo
})
}
x和y表⽰左上⾓的顶点坐标，相对于屏幕的左上⾓（0，0）
2. 元素⾃带measure⽅法
在元素上添加ref
<View ref={(ref)=>this.chatView = ref}></View>
在componentDidMount⽅法⾥添加⼀个定时器，定时器⾥再进⾏测量，否则拿到的数据为0
componentDidMount(){
setTimeOut(()=>{
//todo
})
});
}
3. 使⽤UIManager measure⽅法
import{
UIManager,
findNodeHandle
}from'react-native'
handleClick=()=>{
// todo
})
}
在组件上添加引⽤
<TouchableButton ref={(ref)=>this.buttonRef=ref} onPress={this.handleClick}/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。