如何使用React Navigation实现Stack Navigator全屏覆盖

我正在使用Expo开发一个React Native项目，导航模块采用react-navigation 6.0版本，我的主组件代码如下：

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName={'SignIn'}  screenOptions={{
          headerShown: false
        }}>
          <Stack.Screen name="SignIn" component={SigninScr} />
          <Stack.Screen name="SignUp" component={SignupScr} />
          <Stack.Screen name="EmailVerification" component={EmailVerificationScr} />
        </Stack.Navigator>
    </NavigationContainer>
    );
  }
}

上述代码运行正常，但我无法让Stack.Navigator占满整个屏幕，屏幕上存在一块未被Stack.Navigator覆盖的异常区域：

我查阅了stack navigator的部分官方文档，未找到可强制其占满全屏的属性或样式配置，请问有人知道如何实现该需求吗？

你可以按以下步骤排查修改：

• 给NavigationContainer添加flex: 1样式，确保导航容器占满父容器所有空间，修改后主组件代码如下：

export default class App extends Component {
  render() {
    return (
      <NavigationContainer style={{flex: 1}}>
        <Stack.Navigator initialRouteName={'SignIn'}  screenOptions={{
          headerShown: false
        }}>
          <Stack.Screen name="SignIn" component={SigninScr} />
          <Stack.Screen name="SignUp" component={SignupScr} />
          <Stack.Screen name="EmailVerification" component={EmailVerificationScr} />
        </Stack.Navigator>
    </NavigationContainer>
    );
  }
}

• 检查所有页面组件（如SigninScr、SignupScr等）的根容器样式，确保根容器也设置了flex: 1，避免页面自身没有占满导航容器。
• 如果是Expo异形屏设备顶部出现留白，可以在项目入口用SafeAreaProvider包裹NavigationContainer适配安全区域，也可以在screenOptions中配置状态栏相关属性自定义状态栏显示规则。

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