转换Figma设计以反应本地

Question

我有一个图形文件，它是一个移动屏幕，所有元素都使用像素来表示它们的高度和宽度。然而，react本机并没有典型的web应用程序所具有的像素，整个像素密度的事情让我感到困惑。

假设我想要创建一个需要高度:100 as的视图，我如何在react本机中这样做，因为添加高度:100并不能与所请求的图形文件相同。我在这里找正确的练习。

Answer 1

使用ScaledSheet而不是反应-本土化-大小-物质提供的StyleSheet。它提供了一些简单的工具，使您的缩放更容易。若要使用ScaledSheet定义维度，请执行以下操作：

const LocalStyles = ScaledSheet.create({
  container: {
    width: '500@s',
    height: '100@vs',
    backgroundColor: Colors.white,
    borderRadius: '4@s',
  },
}

S代表尺度，vs代表垂直尺度。在这里，100会相应地在大屏幕和小屏幕上进行不同的翻译，您不必管理它。