错误错误：需要未知模块“未定义”

Question

当我尝试使用 @react-navigation/bottom-tabs 时，出现以下错误：

Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.
MaterialBottomTabView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:126353:43
MaterialBottomTabNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:126107:32
BottomTabNavigator
EnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:109377:24
BaseNavigationContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:108889:28
ThemeProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:114532:21
NavigationContainerInner@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:114392:26
App
RCTView
View
RCTView
View
AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:75604:36
goout(RootComponent)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.goout&modulesOnly=false&runModule=true:82460:28

package.json

  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/material-bottom-tabs": "^6.0.7",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "fbjs": "^3.0.0",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.9.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-navigation": "^4.4.4",
    "styled-components": "^5.3.1",
    "undefined": "^0.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/": "react-navigation/material-bottom-tabs",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.65.0",
    "@types/react-navigation": "^3.4.0",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components": "^5.1.14",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }

index.tsx

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Home} from './Pages/places/Home';
import {Details} from './Pages/places/details';

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

const {Navigator, Screen} = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Navigator>
        <Screen name="Home" component={Home} />
        <Screen name="Details" component={Details} />
      </Navigator>
    </NavigationContainer>
  );
};

export default App;

我已经尝试删除node_modules。我尝试使用 Material Bottom Tab，但出现了同样的错误。

编辑1

错误类型错误：未定义不是对象（评估'_$$_REQUIRE（_dependencyMap [6]，“@react-navigation / elements”）。ResourceSavingView'）

此错误消息出现在第一条消息下方。

Answer 1

我遇到了同样的问题，并在安装react-native-screens后修复了

yarn add react-native-screens

或

npm install react-native-screens

Answer 2

运行这个

rm -rf ./node_modules

然后

yarn

或

npm i

Answer 3

根据文档：https://reactnavigation.org/docs/getting-started/

当您使用反应导航时。请确认这一点

我们现在要安装的库是react-native-screens和react-native-safe-area-context。

缺少它们会导致一些未知的错误，如上面的错误。所以请按照以下步骤操作：

• 运行命令：

  yarn add react-native-screens react-native-safe-area-context

• 再次构建应用程序，以使本机库启动到应用程序。对于 iOS，使用命令

  cd ios && pod install

  并将应用程序再次安装到模拟器。

就是这样，加油！

Answer 4

安装react-navigation底部选项卡后，您是否重新启动了捆绑包并重新运行react-native运行？ React Navigation 确实有一些本机代码，因此在安装模块后需要在设备上重建。

Answer 5

运行以下命令

npm install react-native-screens react-native-safe-area-context

然后安装 ios pod

Answer 6

当我升级所有依赖项和 React Native 时，这也发生在我身上。 所以我浏览了 React Navigation 的文档，他们建议安装

react-native-screens

和

react-native-safe-area-context

yarn add react-native-screens react-native-safe-area-context

这是文档的链接

https://reactnavigation.org/docs/getting-started/

Answer 7

尝试安装react-native-vector-icons。它帮助了我。