0

我想像这样导航（当我没有制作抽屉时它工作正常）：

<Button onPress={() => this.props.navigation.navigate('Projects')}></Button>

但在添加抽屉后，按下按钮后，我收到如下错误：

console.error: The action 'NAVIGATE' with payload '{"name":"Projects"}' was not handled by any navigator.

这是我的抽屉代码：

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={AccountantScreen} />
      <Drawer.Screen name="My Account" component={MyAccountScreen} />
    </Drawer.Navigator>
  );
}

export default function DrawerLeft() {
  return (

    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>

  );
}

这是我的 App.js：

import ProjectsScreen from './screens/Accountant/ProjectsScreen';

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

const FirstNavGroup = createSwitchNavigator({
    Projects: {
       screen: ProjectsScreen
    },

export default createAppContainer(FirstNavGroup)

如何导航到项目页面？

4

2 回答 2

1

您不能将 react-navigation v4 与 v5 混合使用：

Drawer.Navigator正在使用 v5 语法，并且createSwitchNavigator不再存在。

于 2020-02-27T20:54:34.220 回答
0

您正在混合使用 React-Navigation 的 v4 和 v5。

createAppContainer 来自 v4 NavigationContainer 来自 v5

我建议您完全切换到 v5。它应该可以解决您的问题。

我不明白你为什么需要切换导航器。在您的情况下，您可以使用堆栈导航器。

这是示例：https ://reactnavigation.org/docs/stack-navigator

于 2020-02-28T09:47:52.043 回答