处理 React Native 中的字体大小单位（Dp、Sp、px ..）

Question

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

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

<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

在安卓上：

px - 原始像素

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

dp- 与密度无关的像素

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

sp- 可缩放像素

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

在 React Native 上：

• 文本就像sp在 Android 上一样
• 其余的就像 dp

令人困惑的是，React Native 网站说如下：

React Native 中的所有维度都是无单位的，代表与密度无关的像素。

如果您从上面描述的 Android 原生世界中采用“密度无关像素”的定义，那么您可能会错误地假设文本也被处理为密度无关像素（dp），而它们的工作方式就像sp尊重用户的字体大小设置他们应该这样做。

Answer 2

React Native 的 PixelRatio API 可能就是您正在寻找的。

它具有类似 和getPixelSizeForLayoutSize()的方法roundToNearestPixel()，可以帮助您将字体的 dp 转换为像素值。

像素比