小编典典

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

reactjs

我正在为一个开源项目做贡献,在那里我正在为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吗?


阅读 555

收藏
2020-07-22

共1个答案

小编典典

我有些困惑,无法像在浏览器中那样习惯使用开发者控制台进行主动检查。

我不熟悉’dp’单元,但是width: 1根据屏幕像素密度,我收集到的内容在每个设备上的渲染方式都不同(请参阅链接)。react-
native文档中的信息说,这1将在具有高像素密度的屏幕上渲染更厚的图像。这样听起来听起来合乎逻辑,因为您在高密度屏幕上比在低密度屏幕上具有更高的精度,并且本机目标是通用化,因此不会采用高dpi。

据我了解,您可以使用下面链接的PixelRatio API来计算细节元素(例如边框,图标等)的大小,从而可以根据设备的屏幕密度动态调整渲染的大小。

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

2020-07-22