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

Question

我需要将psd设计转换为像素完美应用，但我找不到任何方法来正确测量布局细节。任何人都可以建议一个方法

Answer 1

你可以尝试这个，让我知道它是否正常工作

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