处理反应原生的字体大小单位（Dp，Sp，px ..）

Question

我开始使用React本地开发，我正在构建我的第一个应用。我收到了一些Zepplin文件，告诉我每个屏幕必须如何（包括android xml格式的一些代码），包括fontSize和spacing，问题是，它在DP中，有时是SP ..它没有＆＃39;告诉我像素密度或其他任何东西，所以我不能在我的应用程序中使用相同的数字。在这种情况下我该怎么办？在制作反应原生应用程序时，你们如何处理不同的单位？

以下是我必须更改以反应本机代码的代码示例：

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="18.7sp"
  android:fontFamily="sans-serif-medium"
  android:textStyle="normal"
  android:textColor="#ffffff"
  android:lineSpacingExtra="-18.7sp"
  tools:text="60"
 />

和

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="32sp"
android:fontFamily="sans-serif-medium"
android:textStyle="normal"
android:textColor="#70c300"
android:lineSpacingExtra="-32sp"
tools:text="20"
  />

感谢任何帮助

Answer 1

反应原生的PixelRatio API可能正是您正在寻找的。它有像getPixelSizeForLayoutSize（）和roundToNearestPixel（）这样的方法，可以帮助你将dp转换为字体的像素值。

PixelRatio

Answer 2

您可以使用

之类的软件包

react-native-pixel-perfect

祝你好运！

Answer 3

On Android:

px-原始像素

• 忽略设备的屏幕密度。 （例如 高分辨率屏幕上的内容可能会显示得很小）
• 如果用于文本，则忽略用户的字体大小设置。

dp-密度无关的像素

• 根据设备的屏幕密度进行更改。
• 如果用于文本，则忽略用户的字体大小设置。

sp-可缩放像素

• 根据设备的屏幕密度进行更改。
• 大小会根据用户的字体大小设置进行调整。 （仅应用于文本）

---

On React Native:

• 文本在Android上充当sp
• 其余的行为类似于dp

令人困惑的是React Native website says以下内容：

  React Native中的

所有维度是无单位的，代表   密度无关像素。

如果您从上述Android本机世界中获取“与密度无关的像素”的定义，那么您可能会做出错误的假设，即文本也被视为与密度无关的像素（dp），而它们就像sp一样，应该尊重用户的字体大小设置。