React native 我们如何从psd设计中测量布局测量值，从而在React Native中创建像素完美的应用程序

我需要将psd设计转换为像素完美应用程序，但我找不到任何方法来正确测量布局细节。有人能推荐一种方法吗？

你可以试试这个，并告诉我它是否有效

import React from 'react';
import {
 View,
 StyleSheet,
 Text,
 TouchableOpacity
} from 'react-native';

class MeasureLayout extends React.Component {

  constructor(props) {

  super(props);

   this.state = {

};
}  
measureWelcome() {
 this.refs.welcome.measure(this.logWelcomeLayout);
},

  logWelcomeLayout(ox, oy, width, height, px, py) {
console.log("ox: " + ox);
console.log("oy: " + oy);
console.log("width: " + width);
console.log("height: " + height);
console.log("px: " + px);
console.log("py: " + py);
 },

render() {
return (
  <View style={styles.container}>
    <Text style={styles.welcome} ref="welcome">
      Welcome to React Native!
    </Text>
    <TouchableOpacity onPress={this.measureWelcome}>
      <Text>Measure it</Text>
    </TouchableOpacity>
  </View>
    );
  }
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
 },
 welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
 });

从“React”导入React；
进口{
看法
样式表，
文本，
可触摸不透明度
}从“反应本机”；
类MeasureLayout扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
}  
measurewalcome（）{
this.refs.welcome.measure（this.logWelcomeLayout）；
},
Logwelcome布局（ox、oy、宽度、高度、px、py）{
控制台日志（“ox:+ox”）；
控制台日志（“oy:+oy”）；
控制台。日志（“宽度：”+宽度）；
控制台日志（“高度：+高度）；
控制台日志（“px:+px”）；
console.log（“py:+py”）；
},
render（）{
返回(
欢迎来到这里！
测量它
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});