React Native Expo项目Web与iOS端宽高表现不一致求助

我是React Native生态的新手，用Expo开发应用时发现Web端和iOS端的宽高显示有差异。

示例代码 #

export function Practical({ navigation }: any): JSX.Element {
  return (
    <View>
      <View style={styles.primro}>
        <View style={styles.ultimo}>
          <Text>Hola</Text>
        </View>
      </View>
    </View>
  );
}
const yellow = 'yellow';
const purple = 'purple';
const styles = StyleSheet.create({
  primro: {
    backgroundColor: yellow,
    height: '141px',
    width: '341px',
  },
  ultimo: {
    backgroundColor: purple,
    height: '100px',
    width: '200px',
  },
});

显示效果对比 #

• Web端显示效果：
  
• iOS端显示效果：
  
• 期望效果（Chrome iPhone视图）：
  

我试过调整组件结构，但问题没解决，求帮助。

问题原因及解决办法 #

核心问题 #

React Native对px单位的跨平台解析逻辑不同：Web端遵循CSS的px规则，而iOS端会将px映射为逻辑像素，结合设备像素密度后，实际显示尺寸会和Web端（尤其是Chrome模拟视图）出现偏差。另外，外层View未设置布局约束，可能导致子视图的尺寸计算无参照。

推荐解决方案：使用自适应尺寸适配 #

放弃固定px，改用基于屏幕尺寸的动态计算，保证跨平台显示一致：

方式1：手动用PixelRatio和Dimensions适配

import { PixelRatio, Dimensions, View, Text, StyleSheet } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');
// 假设设计稿基于375px宽度的设备（如iPhone SE）
const designWidth = 375;
const scale = screenWidth / designWidth;

// 适配尺寸，取最接近的像素值
const normalize = (size: number) => PixelRatio.roundToNearestPixel(size * scale);

export function Practical({ navigation }: any): JSX.Element {
  return (
    <View style={{ flex: 1 }}> {/* 外层View占满屏幕，提供布局参照 */}
      <View style={styles.primro}>
        <View style={styles.ultimo}>
          <Text>Hola</Text>
        </View>
      </View>
    </View>
  );
}

const yellow = 'yellow';
const purple = 'purple';
const styles = StyleSheet.create({
  primro: {
    backgroundColor: yellow,
    height: normalize(141),
    width: normalize(341),
  },
  ultimo: {
    backgroundColor: purple,
    height: normalize(100),
    width: normalize(200),
  },
});

方式2：使用第三方适配库

可以用react-native-responsive-screen这类成熟库，简化适配逻辑：

npm install react-native-responsive-screen

import { widthPercentageToDP, heightPercentageToDP } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
  primro: {
    backgroundColor: yellow,
    height: heightPercentageToDP('18%'), // 按屏幕高度百分比设置
    width: widthPercentageToDP('90%'),   // 按屏幕宽度百分比设置
  },
  ultimo: {
    backgroundColor: purple,
    height: heightPercentageToDP('13%'),
    width: widthPercentageToDP('53%'),
  },
});

临时调试方案（不推荐用于生产） #

如果需要临时让iOS端和Web端px表现一致，可以在iOS端禁用像素密度适配，但这会导致高分辨率设备显示模糊：

// 在App.tsx中添加
import { Platform } from 'react-native';
if (Platform.OS === 'ios') {
  (Text.defaultProps as any) = { ...Text.defaultProps, allowFontScaling: false };
}

内容的提问来源于stack exchange，提问作者Nacho