React Native获取组件的位置和宽高

import React, {Component} from 'react';
import {
  Text,
  View,
  findNodeHandle,
  UIManager
} from 'react-native';

export default class App extends Component<Props> {
  render() {
    return (
      <View style={{flexDirection: 'row', marginTop: 100}}>
        <Text
          ref='text'
          style={{marginTop: 100, backgroundColor: 'cyan'}}
          onPress={()=>{
            const handle = findNodeHandle(this.refs.text)
            UIManager.measure(handle,(x, y, width, height, pageX, pageY)=>{
              console.log('相对父视图位置x:', x);
              console.log('相对父视图位置y:', y);
              console.log('组件宽度width:', width);
              console.log('组件高度height:', height);
              console.log('距离屏幕的绝对位置x:', pageX);
              console.log('距离屏幕的绝对位置y:', pageY);
            })
          }}
        >点击获取这几个字的长度</Text>
      </View>
    );
  }
}

image.png

image.png

如果去掉Text外面的View或者保留View但删除样式flexDirection: 'row'结果会是怎样呢 ，组件的宽度将会变成屏幕的宽度

image.png

image.png

使用此方法时一定要注意六个参数的顺序，依次为相对父视图位置x、相对父视图位置y、组件宽度、组件高度、距离屏幕的绝对位置x、距离屏幕的绝对位置y