美文网首页
react native 获取组件在屏幕中的位置

react native 获取组件在屏幕中的位置

作者: 程序马 | 来源:发表于2017-04-27 17:30 被阅读1449次

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

    2,import{UIManager}from'NativeModules'

    3,给组件添加 ref={(ref) =>this.myShow= ref} ref属性

    4,

    const handle = findNodeHandle(this.myShow);

    UIManager.measure(handle,(x,y,width,height,pageX,pageY) => {

    console.log(x,y,width,height,pageX,pageY);

    });

    ==========等同于========

    this.myShow.measure((x,y,width,height,pageX,pageY) => {

    console.log(x,y,width,height,pageX,pageY);

    });

    //x、y:为视图的相对位置。width、height:为视图的宽度和高度。pageX、pageY为视图在屏幕上的绝对位置。(在android上有问题)可采取

    onLayout={(e)=>layout = e.nativeEvent.layout} 这个属性在组件开始加载时就获取到

    但是此方法不灵活,只适用于固定页面。相当于是取当前组件在屏幕中的绝对位置!!!一旦滚动就不适用!!!

    相关文章

      网友评论

          本文标题:react native 获取组件在屏幕中的位置

          本文链接:https://www.haomeiwen.com/subject/ujcmkttx.html