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

当我尝试使用 @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

包.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"
    ]
  }

索引.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')

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

stack overflow ERROR Error: Requiring unknown module "undefined"
原文答案

答案:

作者头像

我有同样的问题,安装 react-native-screens 后刚刚修复

yarn add react-native-screens

或者

npm install react-native-screens
作者头像

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

作者头像

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

作者头像

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

当您使用react导航时。请确保这

**The libraries we will install now are react-native-screens and react-native-safe-area-context.**

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

  • 运行命令: yarn add react-native-screens react-native-safe-area-context
  • 再次构建应用程序以使本地库启动到应用程序。对于 iOS,使用命令 cd ios && pod install 并再次将应用程序安装到模拟器。

就是这样!