react native : measure 获取view 宽高位置/坐标

Posted 2021-08-01 Mars-xq

结论：

• onLayout : 父布局中坐标
• view.measureLayout : 无法获取坐标
• view.measure : 屏幕坐标
• UIManager.measure : 屏幕坐标

demo：

import React, {Component} from 'react';
import {
    Text,
    TouchableOpacity,
    UIManager,
    findNodeHandle, View, Dimensions,
} from 'react-native';
import {
    Surface,
    Shape,
    Path,
    LinearGradient,
    Group,
    Transform,
    RadialGradient,
} from '@react-native-community/art';

const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;

/**
 * onLayout : 父布局中坐标
 * view.measureLayout : 无法获取
 * view.measure : 屏幕坐标
 * UIManager.measure : 屏幕坐标
 */
export default class TextMeasure extends Component {

    UNSAFE_componentWillMount() {
        let that = this;

        console.log('screenW=========>', screenW);
        console.log('screenH=========>', screenH);

        setTimeout(() => {
            that.refs.tv.measure((x, y, width, height, left, top) => {
                console.log('view.measure x = ', x);
                console.log('view.measure y = ', y);
                console.log('view.measure width = ', width);
                console.log('view.measure height = ', height);
                console.log('view.measure left = ', left);
                console.log('view.measure top = ', top);
                // view.measure x =  0
                // view.measure y =  0
                // view.measure width =  200
                // view.measure height =  100.19047546386719
                // view.measure left =  59.80952453613281
                // view.measure top =  120
                // width/height ：view宽高
                // left/top ： view左上角 ，相对屏幕左上角(0,0)坐标
            });

            that.refs.tv.measureLayout(findNodeHandle(this.refs.tv),
                (left, top, width, height) => {
                    console.log('view.measureLayout width = ', width);
                    console.log('view.measureLayout height = ', height);
                    console.log('view.measureLayout left = ', left);
                    console.log('view.measureLayout top = ', top);
                    // view.measureLayout width =  200
                    // view.measureLayout height =  100.19047546386719
                    // view.measureLayout left =  0
                    // view.measureLayout top =  0
                    // width/height ：view宽高
                });
        });
    }

    render() {

        return (

            <View style={{flex: 1, padding: 10, backgroundColor: '#ff0'}}>

                <Text
                    style={{color: '#000', backgroundColor: '#f0f', width: 100, height: 100}}>
                    {'哈哈哈\\n100*100'}
                </Text>

                <TouchableOpacity
                    style={{backgroundColor: '#00f'}}
                    opacity={0.5}
                    onPress={(event) => {
                        console.log('onPress event = ', event);

                        UIManager.measure(findNodeHandle(this.refs.tv),
                            (x, y, width, height, pageX, pageY) => {
                                console.log('UIManager.measure x : ' + x);
                                console.log('UIManager.measure y : ' + y);
                                console.log('UIManager.measure width : ' + width);
                                console.log('UIManager.measure height : ' + height);
                                console.log('UIManager.measure pageX : ' + pageX);
                                console.log('UIManager.measure pageY : ' + pageY);
                                // UIManager.measure x : 0
                                // UIManager.measure y : 0
                                // UIManager.measure width : 200
                                // UIManager.measure height : 100.19047546386719
                                // UIManager.measure pageX : 59.80952453613281
                                // UIManager.measure pageY : 120
                                // width/height ：view宽高
                                // pageX/pageY ： view左上角 ，相对屏幕左上角(0,0)坐标
                            });

                        this.refs.tv.measure((x, y, width, height, left, top) => {
                            console.log('view.measure x = ', x);
                            console.log('view.measure y = ', y);
                            console.log('view.measure width = ', width);
                            console.log('view.measure height = ', height);
                            console.log('view.measure left = ', left);
                            console.log('view.measure top = ', top);
                            // view.measure x =  0
                            // view.measure y =  0
                            // view.measure width =  200
                            // view.measure height =  100.19047546386719
                            // view.measure left =  59.80952453613281
                            // view.measure top =  120
                            // width/height ：view宽高
                            // left/top ： view左上角 ，相对屏幕左上角(0,0)坐标
                        });

                        this.refs.tv.measureLayout(findNodeHandle(this.refs.tv),
                            (left, top, width, height) => {
                                console.log('view.measureLayout width = ', width);
                                console.log('view.measureLayout height = ', height);
                                console.log('view.measureLayout left = ', left);
                                console.log('view.measureLayout top = ', top);
                                // view.measureLayout width =  200
                                // view.measureLayout height =  100.19047546386719
                                // view.measureLayout left =  0
                                // view.measureLayout top =  0
                                // width/height ：view宽高
                            });
                    }}>
                    <Text
                        ref={'tv'}
                        style={{
                            color: '#fff',
                            width: 200,
                            height: 100,
                            borderWidth: 5,
                            top: 10,//相对父布局移动
                            left: 50,//相对父布局移动
                            borderColor: '#ff8041',
                            textAlign: 'center',
                            textAlignVertical: 'center',
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: '#7700ff',
                        }}
                        onLayout={({nativeEvent}) => {
                            console.log('onLayout nativeEvent = ', nativeEvent);
                            //layout:
                            //      height: 100.19047546386719
                            //      width: 200
                            //      x: 49.904762268066406
                            //      y: 9.904762268066406
                            // target: 5
                            // x/y ： view左上角 ，相对【父布局】左上角(0,0)坐标
                            // width/height ：view宽高
                            // target则是这个Text的ReactTag的标签，
                            // 这里是5，也就是说每一个React组件都会有一个tag值，
                            // 而且是唯一的，简单的理解就是能找到这个组件标签。
                        }}
                    >{'我是一个按钮\\n100*200'}</Text>
                </TouchableOpacity>

                <Surface width={60} height={120}
                         style={{backgroundColor: '#00000000', position: 'absolute'}}>
                    <Group>
                        <Shape d={new Path()
                            .moveTo(60, 0)
                            .lineTo(60, screenH)}
                               stroke="#0f0"
                               strokeWidth={3}/>
                        <Shape d={new Path()
                            .moveTo(0, 120)
                            .lineTo(screenW, 120)}
                               stroke="#0f0"
                               strokeWidth={3}/>
                    </Group>
                </Surface>
            </View>
        );
    }
}