React Native 中的 Flexbox 是使用 dp 还是像素？

Question

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

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

Answer 1

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

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