我开始使用 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转换为像素值。
像素比
您可以使用类似的包
反应原生像素完美
祝你好运!