我正在为一个开源项目做贡献,在那里我正在为React Native开发Material Design。我在工作中受阻,无法在填充,对齐等方面进行一些UI级别的增强,
这是抽屉材料设计的官方规范-
在上图中,测量 单位 为 dp 。
但是,在我的React Native代码中,我没有提到任何此类单元。考虑到它是“ react native”,我对它是 px 还是 dp 感到困惑。
我什至查看了React Native for Style组件的官方文档。我什么都看不到。
我的代码看起来像-
const styles = { touchable: { paddingHorizontal: 16, marginVertical: 8, height: 48 }, item: { flex: 1, flexDirection: 'row', alignItems: 'center', }, icon: { position: 'relative', }, value: { flex: 1, paddingLeft: 34, top: 2 }, label: { top: 2 } },
请问这是像素还是dp?而且,是1px = 1dp吗?
1px = 1dp
我有些困惑,无法像在浏览器中那样习惯使用开发者控制台进行主动检查。
我不熟悉’dp’单元,但是width: 1根据屏幕像素密度,我收集到的内容在每个设备上的渲染方式都不同(请参阅链接)。react- native文档中的信息说,这1将在具有高像素密度的屏幕上渲染更厚的图像。这样听起来听起来合乎逻辑,因为您在高密度屏幕上比在低密度屏幕上具有更高的精度,并且本机目标是通用化,因此不会采用高dpi。
width: 1
1
据我了解,您可以使用下面链接的PixelRatio API来计算细节元素(例如边框,图标等)的大小,从而可以根据设备的屏幕密度动态调整渲染的大小。
https://facebook.github.io/react- native/docs/pixelratio.html#content