native.createnavigator 工厂不是函数

Posted 2023-02-22

【中文标题】native.createnavigator 工厂不是函数

【英文标题】：native.createnavigator factory is not a function

【发布时间】：2020-05-22 00:55:19

【问题描述】：

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

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

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 内容：

const App = () => 
  const Drawer = createDrawerNavigator();
  return (
    <View style=styles.container>
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component=Login />
          <Drawer.Screen name="second" component=SecondPage />
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  )
;

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

import  createAppContainer  from 'react-navigation';
import  createStackNavigator  from 'react-navigation-stack';
import  Login, Header, SecondPage, Footer, ThirdPage  from './components/index';

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

export default createAppContainer(AppNavigator);

但我遇到了一个错误（跟随屏幕）。

我该如何解决这个问题？

index.js

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';

【问题讨论】：

我遇到了同样的问题，重新运行 - npm install @react-navigation/native 解决了问题

非常感谢，问题已解决，您知道如何更改抽屉样式吗？我的意思是背景颜色等...

感谢 @LironSher 更新 @react-navigation/native 为我工作

【参考方案1】：

您在项目中同时结合了 React Navigation 4 和 React Navigation 5。无效。

React Navigation 4 包：react-navigation、react-navigation-stack、react-navigation-drawer 等

React Navigation 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 一样创建堆栈导航器

【参考方案2】：

npm install --save @react-navigation/native

之后重新运行

npm install @react-navigation/native

它对我有用。我希望，它会在你的情况下工作

【参考方案3】：

尝试安装： 纱线添加反应导航堆栈

和依赖项： yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

在您的路线中： 从 'react-navigation-stack' 导入 createStackNavigator ;

【参考方案4】：

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

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

createStackNavigator(RouteConfigs, StackNavigatorConfig);

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

Drawers.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>
  )
;

App.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)

index.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 版本必须是最新的。

【讨论】：

我现在尝试了你的解决方案，不幸的是它不起作用

确定这是 index.js 内容：``` export * from './login';从'./header'导出*；从'./secondpage'导出*；从'./footer'导出*；从'./thirdpage'导出*； ```

对不起哥们，请看看这个imgur.com/a/SMhjl4i

@roz333 看看我改过的答案。尝试像这样更改“index.js”。

我做了，但发生了同样的错误，我猜应该是抽屉语法有问题，他们最近改变了抽屉方法，互联网上没有任何新方法的教程。

【参考方案5】：

卸载 @react-navigation/native 并重新安装对我有用。

【讨论】：

您在这里指的是其他答案吗？您的帖子的措辞类似于“谢谢”。但我不知道为什么......

【参考方案6】：

Index.js 内容

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';