TypeError：navigation.openDrawer不是一个函数（未定义）js引擎：React Native中的hermes

Question

我在 React Native 项目中使用 React Navigation 并结合了 Stack Navigator 和 Drawer Navigator，但是当我尝试在组件中使用 navigation.openDrawer() 时，出现以下错误：

• 错误类型错误：navigation.openDrawer不是一个函数（未定义），js引擎：hermes

代码概述：

Home.js

import { useNavigation } from '@react-navigation/native';<br>
const navigation = useNavigation();

const LeftIcon = () => {
    return (
      <TouchableOpacity
        style={styles.pr15}
        onPress={() => navigation.openDrawer()}>
          <Ionicons
          name="menu"
          color={colors.textColor}
          size={moderateScale(30)}
        />
      </TouchableOpacity>
    );
  };

<LeftIcon />

NavigationKeys.js

export const TabNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
  DrawerNavigation: 'DrawerNavigation',
};
export const DrawerNav = {
  Home: 'Home',
  Profile: 'Profile',
  Library: 'Library',
  Explore: 'Explore',
};

NavigationRoutes.js

import DrawerNavigation from './Type/DrawerNavigation';

export const TabRoute = {
  Home,
  Profile,
  Library,
  Explore,
  DrawerNavigation,
};
export const DrawerRoute = {
  Home,
  Profile,
  Library,
  Explore,
};

StackNavigation.js

<Stack.Screen
        name={TabNav.DrawerNavigation}
        component={TabRoute.DrawerNavigation}
      />

我尝试使用@react-navigation/drawer中的navigation.dispatch(DrawerActions.openDrawer())而不是navigation.openDrawer()，但我仍然遇到同样的错误。

Answer 1

• 如果您尝试从无法直接访问抽屉导航的组件打开抽屉，您可以使用 DrawerActions 触发打开抽屉的操作

  import { DrawerActions } from '@react-navigation/native';
  
  // Update in your component
  const LeftIcon = () => {
  const navigation = useNavigation(); // Confirm this is inside the component
  
   return (
     <TouchableOpacity style={styles.pr15}
       onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
       <Ionicons name="menu" color={colors.textColor} size={moderateScale(30)} />
     </TouchableOpacity>
   );
  };
  
  export default LeftIcon;
  

• 更新后的导航结构如下所示

  import { NavigationContainer } from '@react-navigation/native';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import { createStackNavigator } from '@react-navigation/stack';
  import HomeScreen from './Home';
  import ProfileScreen from './Profile';
  
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();
  
  function MyStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }
  
  function MyDrawer() {
    return (
      <Drawer.Navigator>
        <Drawer.Screen name="Main" component={MyStack} />
        {/* Other drawer screens */}
      </Drawer.Navigator>
    );
  }
  
  export default function App() {
    return (
     <NavigationContainer>
       <MyDrawer />
     </NavigationContainer>
   );
  }