React Native 中的 Flexbox 使用 dp 还是像素? [英] Does Flexbox in React Native use dp or pixel?

问题描述

正如标题所提到的，我对 RN 中使用的布局大小值的单位感到困惑.在文档中，下面的代码表明它使用dp 而不是像素作为尺寸单位.这里 getPixelSizeForLayoutSize() 函数尝试将 dp 值转换为像素值.但是，在实际应用程序中，我的组件在不使用 PixelRatio.get() 划分大小值(高度/宽度等)时会超出屏幕范围.非常感谢您的澄清！

As the title mentions, I am confused about the unit of layout size values used in RN. In the documentation, there is the code below that suggests it uses dp instead of pixel as the size unit. Here the getPixelSizeForLayoutSize() function tries to convert dp values to pixel values. However, in real applications, my components get out of screen bound when not dividing the size values (height/width, etc) using PixelRatio.get(). Would really appreciate your clarification!

var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

推荐答案

React Native 在 JavaScript 级别使用逻辑像素(在 iOS 上也称为点")，而不是设备像素.在原生级别工作时，您有时可能需要通过将逻辑像素乘以屏幕比例(例如 2x、3x)来处理设备像素.

React Native uses logical pixels (also know as "points" on iOS), as opposed to device pixels, at the JavaScript level. When working at the native level, you occasionally may need to work with device pixels by multiplying the logical pixels by the screen scale (e.g. 2x, 3x).

当您处理图像时，您需要以逻辑像素指定它们的尺寸.此外，React Native 支持分数像素.当您需要以设备像素的粒度指定精确布局时，请使用 1/PixelRatio.get().

When you are working with images, you'll want to specify their dimensions in logical pixels. Also, React Native supports fractional pixels. When you need to specify precise layouts at the granularity of device pixels, use 1 / PixelRatio.get().

这篇关于React Native 中的 Flexbox 使用 dp 还是像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！