使用TypeScript开发React Native底部导航时遇错误求助

我想在主屏幕添加一个可跳转到两个页面的简易底部导航栏，但出现了「error undefined」的错误。

我的Homescreen.tsx代码： #

render() {
    const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Screen1" component={Screen1Screen}></Tab.Screen>
          <Tab.Screen name="Screen2" component={Screen2Screen}></Tab.Screen>
        </Tab.Navigator>
      </NavigationContainer>
    );
  }

类型定义文件： #

export type BottomTabNavigatorParamList = {
    OTP: undefined;
    Dashboard: undefined;
}

我已经按照TypeScript类型检查要求指定了路由参数为undefined，但错误依然存在。补充我的package.json配置：

{
  "name": "Test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
    "fixcode": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/bottom-tabs": "^6.5.1",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.6",
    "lodash": "^4.17.15",
    "lottie-react-native": "^5.1.4",
    "react": "17.0.2",
    "react-native": "0.67.5",
    "react-native-camera": "^4.2.1",
    "react-native-extended-stylesheet": "^0.12.0",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-keyboard-manager": "^4.0.13-16",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-permissions": "^3.6.1",
    "react-native-qrcode-scanner": "^1.5.5",
    "react-native-qrcode-svg": "^6.0.6",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-swiper": "^1.6.0",
    "react-native-switch-toggle": "^1.1.4",
    "react-navigation": "^4.3.7",
    "react-navigation-redux-helpers": "^4.0.1",
    "react-navigation-stack": "^2.3.11",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^24.0.24",
    "@types/lodash": "^4.14.149",
    "@types/react-native": "^0.62.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-test-renderer": "16.9.2",
    "@types/redux-logger": "^3.0.7",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "prettier": "^2.0.2",
    "react-test-renderer": "17.0.2",
    "typescript": "^3.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

请问有什么解决思路？

1. 修正路由名称不匹配
   你的BottomTabNavigatorParamList定义的路由名是OTP、Dashboard，但代码里实际用的是Screen1、Screen2，TypeScript会因类型不匹配报错。把类型定义改成和实际路由名一致：

   export type BottomTabNavigatorParamList = {
       Screen1: undefined;
       Screen2: undefined;
   }
   

2. 移除冲突的旧版导航依赖
   你同时安装了@react-navigation v6和旧版react-navigation v4（含react-navigation-stack等），版本冲突会引发未知错误。卸载旧版依赖：

   npm uninstall react-navigation react-navigation-stack react-navigation-redux-helpers
   # 或使用yarn
   yarn remove react-navigation react-navigation-stack react-navigation-redux-helpers
   

3. 升级TypeScript版本
   @react-navigation v6要求TypeScript版本至少4.1，你当前用的3.8.3不兼容。升级到兼容版本：

   npm install typescript@^4.9.5 --save-dev
   # 或使用yarn
   yarn add typescript@^4.9.5 --dev
   

4. 确认导航组件导入正确
   确保导入的是v6版本的导航组件：

   import { NavigationContainer } from '@react-navigation/native';
   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   

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