React Native中默认的样式单位是什么？

Question

我正在为开源项目做贡献,我正在为React Native开发材料设计.我在工作中被阻止,我无法通过填充,对齐等方式进行一些UI级别的增强,

这是抽屉材料设计的官方规格 -

在上图中,测量单位是dp.

但是,在我的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吗？

Answer 1

来自文档:

React Native中的所有维度都是无单位的,并且表示与密度无关的像素.无论屏幕尺寸如何,以这种方式设置尺寸对于应始终以完全相同的尺寸呈现的组件是常见的.

是的,React Native中的单位是dp.如果要将它们转换为像素,请使用PixelRatio.getPixelSizeForLayoutSize()

Answer 2

我有点混淆你的困惑,不能像我们习惯在浏览器中那样主动检查开发者控制台.

我不熟悉'dp'单元,但是width: 1根据屏幕的像素密度,我在每台设备上的渲染方式不同(参见链接).反应原生文档中的信息表明,1在具有高像素密度的屏幕上会变得更厚.这听起来很合理,因为你在高密度屏幕上比在低密度屏幕上具有更高的精度,并且反应原生的目标是普及,因此它不会假设高dpi.

我的理解是,您可以使用以下链接的PixelRatio API来计算细节元素的大小(想想边框,图标等),这样您就可以根据设备的屏幕密度动态调整渲染大小.

https://facebook.github.io/react-native/docs/pixelratio.html#content