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

Answer 2

您可以通过将设计图像覆盖在应用程序顶部来在 React Native 中实现像素完美的设计。我创建了一个库来简化这个过程。

在这里查看：https://github.com/qvantor/rn-pixel-perfect