React Navigation 6.x 嵌套导航缺少 route.id

Question

我正在尝试开发嵌套在选项卡导航中的堆栈导航，但在尝试访问包含堆栈的选项卡时收到错误消息：TypeError: undefined is not an object (evaluating 'route.key')。

标签：

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import TabBarComponent from '../BottomTabBarComponent';
import {MyStack} from '../MyStack';
import {OtherComponent} from '../OtherComponent';
import {NavigationContainer} from '@react-navigation/native';

export const BottomTab = () => {
  const {Navigator, Screen} = createBottomTabNavigator();
  return (
    <NavigationContainer>
      <Navigator tabBar={props => <TabBarComponent {...props} />}>
        <Screen name="My Stack" component={MyStack} />
        <Screen name="Other Component" component={OtherComponent} />
      </Navigator>
    </NavigationContainer>
  );
};

堆栈：

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Stack} from './Stack';

export const MyStack = () => {
  const {Navigator, Screen} = createNativeStackNavigator();
  return (
    <Navigator>
      <Screen name="Stack" component={Stack} />
    </Navigator>
  );
};

我目前正在使用这个依赖项：

"dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/native-stack": "^6.1.0",
    "@types/": "react-navigation/native",
    "@types/react-native-vector-icons": "^6.4.8",
    "native-base": "^3.1.0",
    "react": "17.0.1",
    "react-native": "0.64.1",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^8.1.0",
    "styled-components": "^5.3.1",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.64.5",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "typescript": "^3.8.3"
  },

有人知道为什么会这样吗？看起来 lib 无法为我的堆栈创建 id。

Answer 1

我刚刚发现我必须将@react-navigation/native 更新为与@react-navigation/native-stack 相同的版本。