处理 react native 中的字体大小单位(Dp, Sp, px.)



我开始使用 React native 进行开发,目前正在构建我的第一个应用程序。我得到了一些Zepplin文件,告诉我每个屏幕必须如何(包括android xml格式的一些代码),包括fontSize和间距,问题是,它是DP,有时是SP。它不会告诉我像素密度或其他任何东西,所以我不能在我的应用程序中使用相同的数字。在这种情况下我该怎么办?你们在制作 react 原生应用程序时如何处理不同的单元?

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

<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"
/>

任何帮助不胜感激

在安卓上:

px- 原始像素

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

dp- 与密度无关的像素

  • 根据设备的屏幕密度而变化。
  • 忽略
  • 用户的字体大小设置(如果用于文本)。

sp- 可缩放像素

  • 根据设备的屏幕密度而变化。
  • 大小
  • 根据用户的字体大小设置进行调整。(只应用于文本)

在 React Native 上:

  • 文本在安卓上充当sp
  • 其余的就像dp

令人困惑的是,React Native 网站说:

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

如果您从上述Android原生世界中获取"与密度无关的像素"的定义,那么您可能会错误地假设文本也作为与密度无关的像素(dp)进行处理,而它们的工作方式就像sp尊重用户的字体大小设置一样。

react native 的 PixelRatio API 可能是你正在寻找的。

它具有getPixelSizeForLayoutSize()roundToNearestPixel()等方法,可以帮助您将字体从dp转换为像素值。

像素比

您可以使用类似的包

反应原生像素完美

祝你好运!

相关内容

  • 没有找到相关文章

最新更新