React Native设置flex:1后页面白屏，移除后恢复正常，是什么原因？

你当前遇到的白屏是flex:1的特性导致的：flex:1会让当前容器占满父容器的所有剩余可用高度，如果当前HomeScreen的父容器本身没有合法的高度值，那加了flex:1的根View高度会被计算为0，所有子组件都无法渲染展示。而你移除flex:1时，根View会按照内部内容的实际高度自动撑开，所以内容可以正常显示。

按优先级依次排查即可：

• 优先检查项目入口文件（一般是App.js / index.js），确保包裹HomeScreen的最外层View添加了flex:1属性，参考代码：

// App.js 示例
import React from 'react';
import { View } from 'react-native';
import HomeScreen from './screens/HomeScreen';

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

• 如果你使用了React Navigation等导航库管理路由，检查HomeScreen对应的路由配置，确认没有给页面设置异常的高度、偏移或隐藏属性。
• 临时测试可以把HomeScreen根容器的flex:1替换为固定高度比如height: 900，如果内容正常显示，即可完全确认是父容器高度分配问题，按第一条调整即可。

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