RN-获取组件的高宽和位置

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

<View style={styles.container}> // padding: 20

                <View style={{marginLeft: 100, marginTop: 50}}>
                    <Text ref="banner" style={{marginTop: 123, backgroundColor: 'red', marginLeft: 78}} onPress={()=>{
                        const handle = findNodeHandle(this.refs.banner);
                        UIManager.measure(handle,(x, y, width, height, pageX, pageY)=>{
                            console.log('x=',x);//相对父视图位置x
                            console.log('y=',y);//相对父视图位置y
                            console.log('width=',width);//组件宽度
                            console.log('height=',height);//组件高度
                            console.log('pageX=',pageX);//绝对位置x
                            console.log('pageY=',pageY);//绝对位置y
                        })


                        UIManager.measureInWindow(handle,(x, y, width, height)=>{
                            console.log('====x=',x);//绝对位置x
                            console.log('====y=',y);//绝对位置y
                            console.log('====width=',width);//组件宽度
                            console.log('====height=',height);//组件高度

                        })
                    }}>
                        这是一个按钮adsfadsfadf
                    </Text>

                </View>
 </View>
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这是一个雨后的清晨 太阳出来了 路上的行人渐渐多了起来 雨后的蚂蚁 忘记了当初的慌张 成群结队 穿过了一条水泥路面...
    王春涞阅读 354评论 0 7
  • 人生的痛苦是无穷的,它具有各种各样的形式,但其中最可怜的,最无可挽救的痛苦就是孤独,是永久没有一个伴侣。 ...
    四夕1阅读 243评论 0 0
  • 橙黄色的火苗欢快跳动着,火舌舔舐着乌黑的密封铁炉,色彩对比深沉而强烈。锅架在一组铁架子上,沉着地匀速转动...
    赵小小阅读 395评论 0 2
  • 你发现了吗? 爱抽烟或是肠胃不好的人,容易口臭。 如果你是一个既爱抽烟,肠胃又不好的人呢? 那么恭喜你,你的口臭几...
    大东教练阅读 842评论 0 0

友情链接更多精彩内容