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

IT技术 android css reactjs material-design react-native
2021-04-06 17:10:21

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

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

根据 Material Design 的规范

在上图中,测量单位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吗?

4个回答

文档

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

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

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

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

我不熟悉“dp”单位,但从我收集的内容width: 1来看,根据屏幕的像素密度(请参阅链接)在每个设备上呈现不同的效果。react-native 文档中的信息说,这1会在具有高像素密度的屏幕上呈现得更厚。这听起来很合乎逻辑,因为您在高密度屏幕上的精度比在低密度屏幕上的精度更高,并且 react-native 的目标是通用,因此它不会假设高 dpi。

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

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

回到我的问题, height: 48表示 40px(或者像素比)对吗?它不是 40dp 对吗?
2021-06-05 17:10:21
感谢您提供开始探索的指针:)
2021-06-12 17:10:21
这是一个很好的信息。顺便说一句,“dp”的意思是 - 与密度无关的像素。更多信息 - developer.android.com/guide/practices/screens_support.html .. 为了开发原生 android 应用程序,我们在 xml 中使用它来设置布局。
2021-06-16 17:10:21
此答案具有误导性并提供不准确的信息。参见尼克的回答。
2021-06-16 17:10:21
@bozzmob 我很高兴你发现这些信息很有趣,虽然不是你想要的。我不确定高度之间的确切比例:48 像素和 40 像素。就像你说的那样,似乎正在进行一些比率计算。
2021-06-20 17:10:21

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

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

谢谢。是的。在我目前正在进行的分析之后,我会考虑您的回答。我同意,要获得响应式 UI,我们需要像素比。
2021-05-31 17:10:21

据我所知,我们在 react js 或 react native 中使用的 javascript 样式使用像素。像素比仅用于支持不同尺寸的移动设备屏幕。

谢谢。行。将进一步研究如何支持不同的屏幕尺寸。当涉及到应用程序时,响应能力也是最重要的。
2021-06-16 17:10:21