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

【问题标题】：What is the default unit of style in React Native?React Native 中默认的样式单位是什么？
【发布时间】：2016-04-02 07:03:25
【问题描述】：

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

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

在上图中，测量的UNIT为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吗？

【问题讨论】：

标签： android css reactjs material-design react-native

【解决方案1】：

来自docs：

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

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

【讨论】：

这应该是公认的答案。当前接受的一个听起来像是单位是像素，但大多数其他顶级谷歌点击不同意这一点，并澄清它们在 android 上是 dp 而在 ios 上是“逻辑像素”（我仍在试图弄清楚这个术语，但我相信可能意味着“点”）

【解决方案2】：

我与您有些困惑，无法像我们在浏览器中习惯的那样使用开发人员控制台进行主动检查。

我不熟悉“dp”单位，但根据我收集到的信息，width: 1 在每个设备上的呈现方式都不同，具体取决于屏幕的像素密度（参见链接）。 react-native 文档中的信息说1 会在高像素密度的屏幕上渲染得更厚。这听起来很合乎逻辑，因为您在高密度屏幕上比在低密度屏幕上具有更高的精度，并且 react-native 旨在通用，因此它不会假设高 dpi。

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

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

【讨论】：

这是一个非常棒的信息。顺便说一句，“dp”的意思是-与密度无关的像素。更多信息 -developer.android.com/guide/practices/screens_support.html .. 为了开发原生 android 应用，我们在 xml 中使用它来设置布局。
回到我的问题，height: 48 意味着 40px（或者可能是像素比）对吗？而且它不是 40dp 对吗？
@bozzmob 很高兴您发现这些信息很有趣，但并不完全符合您的要求。我不确定高度之间的确切比例：48 和 40 像素。就像你说的那样，那里似乎正在发生一些比率计算。
感谢您提供开始探索的指南 :)
此答案具有误导性并提供不准确的信息。请参阅尼克的回答。

【解决方案3】：

这是您必须考虑的像素比率。像素代表一个绝对值。像素比是一个相对值。要使应用屏幕和组件具有响应性，您必须使用像素比。

我已经在多个应用程序中使用过。我认为这就是你必须这样做的方式。希望这能回答你的问题。

【讨论】：

谢谢。是的。在我目前正在做的分析之后，我会考虑你的答案。我同意，要获得响应式 UI，我们需要像素比。

【解决方案4】：

据我所知，我们在 react js 或 react native 中使用的 javascript 样式使用像素。像素比只需要支持不同尺寸的移动设备屏幕即可。

【讨论】：

谢谢。好的。将更多地研究如何支持不同的屏幕尺寸。就应用而言，响应能力也是首要考虑因素。