native.createnavigator工厂不是函数


10

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

我通过以下命令安装了该命令:

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>
  )
};

我应该说我已经创建LoginSecondPage组件,并在一个名为文件中声明他们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';

1
我遇到了同样的问题,请重新运行-npm install @ react-navigation / native解决了该问题
Liron Sher

我真的很感激,问题已经解决,您知道如何更改抽屉样式吗?我的意思是backgroundeColor等...
roz333

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

Answers:


0

我不明白您现在要做什么。我认为您想添加一个抽屉式导航器。

您的问题是必须使用一个容器,但是必须使用两个容器,而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-NavigationStackNavigator版本必须是最新的。


我现在尝试了您的解决方案,很遗憾,它没有起作用
roz333

@ roz333会发生相同的错误吗?
Hong开发人员

是的,完全相同的错误
roz333

@ roz333您能告诉我index.js文件吗?
hong开发人员

确保这是index.js的内容:```export * from'./login'; 从'./header'导出*; 从'./secondpage'导出*; 从'./footer'导出*; 从'./thirdpage'导出*; ```
roz333

14

您正在项目中结合使用React Navigation 4和React Navigation 5。这是无效的。

反应导航4包:react-navigationreact-navigation-stackreact-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


0

尝试安装:yarn add react-navigation-stack

和依赖关系:纱线添加react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @ react-native-community / masked-view

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


-1

Index.js内容

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.