Question

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

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

如何导航到“项目”页面？

Answer 1

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

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

Answer 2

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

createAppContainer来自v4 NavigationContainer来自v5

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

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

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

如何从用本机打开的抽屉屏幕导航到另一个屏幕？

2 个答案: