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

1、React Native获取组件的宽高

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

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 {

render() {

return (

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);

});

}}>

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);

});

}}

>点击获取这几个字的长度

);

}

}