react-navigation 6 Web端跳转新页面叠加在当前页面问题排查

• 导航器依赖选择错误：@react-navigation/native-stack是原生端专用实现，Web端使用该依赖会导致栈逻辑异常，新页面仅做层级叠加，不会销毁/隐藏下层页面。
• 页面容器样式缺失：默认栈导航的页面容器无背景色、无全屏独占配置，透明背景会让下层页面直接透出，产生叠加视觉效果。
• 路由层级不匹配：Linking配置的路由嵌套结构和实际代码中的路由组件嵌套结构不一致，会导致多路由页面同时被渲染。
• 跳转方法使用不当：使用navigate方法跳转已存在的路由时，不会重置路由栈，也可能引发栈层冗余叠加。

• 替换导航器依赖：卸载@react-navigation/native-stack，安装@react-navigation/stack，修改导航初始化代码：
  替换原有导入语句：

  // 移除
  import { createNativeStackNavigator } from '@react-navigation/native-stack'
  // 新增
  import { createStackNavigator } from '@react-navigation/stack'
  const Stack = createStackNavigator()
  

• 配置全局页面基础样式：在Stack.Navigator的screenOptions中添加contentStyle配置，保证页面独占全屏且有默认背景：

  <Stack.Navigator
    screenOptions={{
      contentStyle: {
        width: '100%',
        minHeight: '100vh',
        backgroundColor: '#ffffff',
      }
    }}
  >
    {/* 路由页面配置 */}
  </Stack.Navigator>
  

• 调整跳转逻辑：需要跳转后销毁当前页面时，使用navigation.replace替代navigation.navigate，减少不必要的栈层。
• 对齐Linking配置：逐一核对Linking配置中的路由嵌套层级、路由名称，和实际路由组件的嵌套结构、name属性完全一致。

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