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

Question

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

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

在上图中，测量的 UNIT 为 dp 。

但是，在我的React Native代码中，我看到没有提到这样的单位。考虑到它是＆＃34;反应原生＆＃34;我很困惑是 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

来自docs：

  

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

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

Answer 2

我在某种程度上分享了您的困惑，无法像我们在浏览器中那样使用开发者控制台进行主动检查。

我不熟悉'dp'单元，但是我收集的width: 1在每个设备上呈现的方式不同，具体取决于屏幕的像素密度（请参阅链接）。 react-native文档中的信息表明，1会在具有高像素密度的屏幕上呈现更厚。这听起来很合理，因为你在高密度屏幕上比在低密度屏幕上具有更高的精度，并且反应原生的目标是普及，因此它不会假设高dpi。

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

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

Answer 3

据我所知，我们用于反应js或反应原生的javascript样式使用像素。仅需支持像素比率即可支持不同尺寸的移动设备屏幕。

Answer 4

您必须考虑像素比率。像素表示绝对值。像素比是一个相对值。要使应用程序屏幕和组件响应，您必须使用像素比率。

我已经在多个应用中使用过了。而且我认为你必须这样做。希望这能回答你的问题。