React Native获取组件的宽高以及React Native屏幕dp与px转换计算

1、React Native获取组件的宽高

2、以及React Native屏幕dp与px转换计算；

3、参考：https://www.jianshu.com/p/1198be7e3344

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

const {width, height} = Dimensions.get('window');
const screenWidth = width;
const screenHeight = height;
const dpToPx = PixelRatio.get();

export default class App extends Component<Props> {
    render() {
        return (
            <TouchableOpacity ref="view" style={{backgroundColor: 'red', flex: 1}}
                              onPress={() => {
                                  const handle = findNodeHandle(this.refs.view);
                                  UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                                      console.log('相对父视图位置x:', x);
                                      console.log('相对父视图位置y:', y);
                                      console.log('组件宽度', width);
                                      console.log('组件高度height:', height);
                                      console.log('距离屏幕的绝对位置x:', pageX);
                                      console.log('距离屏幕的绝对位置y:', pageY);
                                      console.log('screenWidth: ', screenWidth);
                                      console.log('screenHeight: ', screenHeight);
                                      console.log('dpToPx: ', dpToPx);
                                      console.log('dpToPx * screenWidth: ', dpToPx * screenWidth);
                                      console.log('dpToPx * screenHeight: ', dpToPx * screenHeight);
                                  });
                              }}>
                <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);
                            console.log('组件高度height:', height);
                            console.log('距离屏幕的绝对位置x:', pageX);
                            console.log('距离屏幕的绝对位置y:', pageY);
                        });
                    }}
                >点击获取这几个字的长度</Text>
            </TouchableOpacity>
        );
    }
}