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:', 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:', width);
                            console.log('組件高度height:', height);
                            console.log('距離屏幕的絕對位置x:', pageX);
                            console.log('距離屏幕的絕對位置y:', pageY);
                        });
                    }}
                >點擊獲取這幾個字的長度</Text>
            </TouchableOpacity>
        );
    }
}