在React Native中处理字体大小单位(Dp，Sp，px ..) [英] Dealing with font size units in react native (Dp, Sp, px..)

问题描述

我开始使用React native进行开发，目前正在构建我的第一个应用程序.我收到了一些Zepplin文件，告诉我每个屏幕的显示方式(包括一些android xml格式的代码)，包括fontSize和space，问题是，它在DP中，有时在SP中.它没有告诉我像素密度或其他任何内容，因此我不能只在我的应用中使用相同的号码.在这种情况下我该怎么办?在制作本机应用程序时，你们如何处理不同的单元?

I'm beginning to develop with React native and I'm currently building my first app. I got handed some Zepplin Files telling me how each screen must be (including some code in android xml format), including fontSize and spacing, the problem is, it's in DP, and sometimes SP.. It doesn't tell me the pixel density or anything else, so I can't just use the same number in my app. What should I do in this case? How do you guys handle different units when making your react native app?

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

Here is a code sample I have to change to react native code:

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

感谢您的帮助

推荐答案

在Android上:

px-原始像素

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

On Android:

px - raw pixels

• Ignores the device's screen density. (e.g. on high-res screen stuff may show up very small)
• Ignores the user's font size settings if used for text.
• 根据设备的屏幕密度进行更改.
• 如果用于文本，则忽略用户的字体大小设置.
• 根据设备的屏幕密度进行更改.
• 大小会根据用户的字体大小设置进行调整. (仅应用于文本)
• 文本在Android上充当sp
• 其余的行为类似于dp
• Texts act as sp on Android
• The rest acts like dp

令人困惑的是， React Native网站说以下内容:

What can be confusing is that the React Native website says the following:

React Native中的

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

All dimensions in React Native are unitless, and represent density-independent pixels.

如果您是从上述Android原生世界中获取与密度无关的像素"的定义，那么您可能会做出错误的假设，即文本也被视为与密度无关的像素(dp)，而它们的工作原理类似于sp尊重用户的字体大小设置.

If you are taking the definition of "density-independent pixels" from the Android native world described above, then you could make the false assumption that texts are also handled as density-independent pixels(dp) whereas they work like sp respecting the user's font size settings as they should.

这篇关于在React Native中处理字体大小单位(Dp，Sp，px ..)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！