css - 文档中的 React-native DPI，但实践中的 CSS 像素

Question

我创建了一个高度为 100 像素并带有红色边框的容器：

// Stuff.tsx
import React, { FC } from 'react';
import { SafeAreaView, Text, View } from 'react-native';

// Styles
import { styles } from './styles';

type Props = {
};

export const SignIn: FC <Props> = () => (
  <SafeAreaView>
    <Text>----</Text>
    <Text>----</Text>
    <Text>----</Text>
    <View style={ styles.testContainer }></View>
  </SafeAreaView>
);

// styles.ts

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  testContainer: {
    height: 100,
    borderColor: '#f00',
    borderWidth: 1
  }
});

因为react-native uses dpi我希望这个容器在我的两个设备上具有相同的物理高度，但它没有发生：

使用这些图像很难注意到，但实际上底部的容器（iPhone）的高度比顶部的容器（Android）略小。

DPI 的定义和整个概念是它始终等于 1/160 英寸（至少根据材料设计规范）。那为什么我在不同的设备上会得到不同的物理尺寸呢？

更重要的是，我的 Android ( 360x676) 和 iPhone X 设备 (375x812) 的尺寸都是它们屏幕尺寸的精确值**CSS Pixels**，这似乎支持了我的理论，即 RN 实际使用的是CSS Pixels，而不是DPI。

我对吗？

标签： cssreact-native