native.createnavigator 工厂不是一个函数

Question

我将在我的项目中设计一个抽屉导航。

我通过这个命令安装了它：

npm install @react-navigation/drawer

然后将其导入 App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

这是我的package.json内容：

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",

这是我的App.js内容：

npm install @react-navigation/drawer

我应该说我已经创建了Login和SecondPage组件并在一个名为的文件中声明了它们root.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

但我收到一个错误（以下屏幕）。

我怎样才能解决这个问题？

索引.js

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",

Answer 1

你在你的项目中结合了 React Navigation 4 和 React Navigation 5。它无效。

反应导航4包：react-navigation，react-navigation-stack，react-navigation-drawer等。

反应导航5包：@react-navigation/native，@react-navigation/stack，@react-navigation/drawer等。

遵循官方文档并使用正确的软件包版本和语法https://reactnavigation.org/docs/en/getting-started.html

基本上删除您的代码root.js并创建堆栈导航器，如这里https://reactnavigation.org/docs/en/stack-navigator.html

Answer 2

npm install --save @react-navigation/native

重新运行之后

npm install @react-navigation/native

这个对我有用。我希望它适用于你的情况

Answer 3

我不明白你现在想做什么。我想你想添加一个抽屉导航器。

您的问题是您必须使用一个容器，但您有两个，并且 createStackNavigator 有两个参数，但您有三个。

createStackNavigator(RouteConfigs, StackNavigatorConfig);

我认为你的导航器结构应该如下。

抽屉.js

export default const Drawers = () => {
  const Drawer = createDrawerNavigator();
  return (
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
  )
};

应用程序.js

import Drawers from "./Drawers"
...

const AppNavigator = createStackNavigator({
  login: { screen: Drawers },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
});

export default createAppContainer(AppNavigator)

索引.js

import Login from './login';
import Header from './header';
import SecondPage from './secondpage';
import Footer from './footer';
import ThirdPage from './thirdpage';

export { Login, Header, SecondPage, Footer, ThirdPage}

或者

此问题可能是版本的兼容性问题。 React-Navigation并且StackNavigator版本必须是最新的。