我们如何测量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, 
}, 
});