React Native中View百分比尺寸的平台行为差异与文档不符问题

文档描述与实际测试的矛盾 #

React Native官方文档指出：使用百分比尺寸时，父组件必须显式定义尺寸，否则设置了百分比宽高的子View会不可见。但实际跨平台测试后发现表现不一致：

• iOS/Android平台：即使父组件未设置尺寸，带百分比宽高的子View仍能正常渲染显示
• Web平台：完全符合文档描述，子View不可见

可复现代码 #

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: '50%',
    height: '50%',
    backgroundColor: 'red',
  },
});

测试表现说明 #

测试截图显示：iOS和Android端能看到红色的半宽半高方块，而Web端页面无任何可见内容。

差异原因分析 #

这是不同平台的布局引擎实现逻辑差异导致的：

• 移动端（iOS/Android）基于Yoga布局引擎，当父组件未显式设置尺寸时，会默认继承上层容器的可用空间（比如屏幕窗口尺寸），子组件的百分比尺寸会基于这个隐式的父容器空间进行计算，因此能正常显示。
• Web端遵循CSS布局规则，父元素未设置尺寸时，其高度默认为0（宽度默认占满父容器但高度不自动拉伸），子组件基于0尺寸计算百分比，最终无法显示。

跨平台兼容建议 #

为了保证代码在全平台行为一致，建议始终给使用百分比尺寸的子组件的父容器显式设置尺寸，常见两种方式：

1. 基于屏幕尺寸设置父容器大小

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

const { width, height } = Dimensions.get('window');

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width,
    height,
  },
  box: {
    width: '50%',
    height: '50%',
    backgroundColor: 'red',
  },
});

2. 使用flex布局让父容器占满可用空间

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1}}>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: '50%',
    height: '50%',
    backgroundColor: 'red',
  },
});

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