错误：未定义无法解析模块`@react-navigation/bottom-tabs`答案

【问题标题】：Error: undefined Unable to resolve module `@react-navigation/bottom-tabs`错误：未定义无法解析模块`@react-navigation/bottom-tabs`
【发布时间】：2020-07-28 20:04:06
【问题描述】：

一直在寻找有关导航错误模块的解决方案。我试过reset-cache，删除nodu_modules，重新安装模块，但还是不行。

错误的完整细节

Unable to resolve module `@react-navigation/native` from `src/App.js`: @react-navigation/native could not be found within the project.

Package.json

"@react-native-community/masked-view": "^0.1.9",
    "native-base": "^2.13.12",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.6.1",
    "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-vector-icons": "^6.6.0",
    "react-navigation-stack": "^2.3.11"

App.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

也许您应该提及您正在使用的平台。似乎有一些 MacOS 细节。
reactnavigation.org/docs/bottom-tab-navigator

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

在你的 package.json 添加 "@react-navigation/native": "^5.1.5"，然后运行 npm install @react-navigation/native

【讨论】：

【解决方案2】：

我认为您必须安装软件包。 npm install @react-navigation/bottom-tabs

【讨论】：

【解决方案3】：

你使用 react-navigation 的包是模块化的。因此，为了使其正常工作，您必须安装特定的组件。

在您的情况下，您必须运行：

yarn add @react-navigation/native
yarn add @react-navigation/bottom-tabs

这种行为的原因是在许多应用程序中您只需要一种导航。这意味着您正在安装未使用的代码并弄乱您的包。

为了清除捆绑器缓存，您可以执行以下操作：

npm

 watchman watch-del-all && rm -rf $TMPDIR/react-* &&
 rm -rf node_modules/ && npm cache clean && npm install && 
 npm start -- --reset-cache

npm >= 6.0 和 RN >= 0.50：

 watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* &&
 rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force &&
 npm install && npm start -- --reset-cache

这应该做的事情。

【讨论】：