react-native - 当抽屉嵌套在 native 堆栈导航中时，如何在抽屉菜单图标上设置操作？

Question

我创建了一个堆栈导航和抽屉导航。抽屉式导航嵌套在堆栈导航中，因为首先当用户第一次打开应用程序时，他们会看到演练页面，然后进入包含抽屉式导航的主页。

问题在于，我在 Drawer.Navigator 的 screenOptions 的 headerLeft 中添加了图像，然后单击它，调用了 navigation.openDrawer()，但似乎 navigation.openDrawer 不是一个函数。

我想要的是，我想在标题中添加图像，例如打开抽屉的菜单，以及其他 2 个用于转到其他页面的图像和中心的应用程序 Logo 。

下面是完整 View 示例的代码和博览会链接:

**APP.JS**
if(isFirstTimeLoad) return (
  <>
    <StatusBar  />
    <Walkthrough onDone={handleDone} />
  </>
);

if(!isFirstTimeLoad) return (
  <NavigationContainer>
    <MainNavigator />
  </NavigationContainer>
)

**MAINNAVIGATOR.JS**
<Stack.Navigator>
  <Stack.Screen name="Home" component={DrawerNavigator} />
</Stack.Navigator>

**DRAWERNAVIGATOR.JS**
<Drawer.Navigator
  useLegacyImplementation
  screenOptions={{
    headerLeft: () => (
      <TouchableOpacity onPress={openDrawer}>
        <Image
          source={require('../assets/menu.png')}
          style={{ height: 20, width: 20 }}
        />
      </TouchableOpacity>
    ),
  }}>
  <Drawer.Screen name="Feed" component={Feed} options={{}} />
  <Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>

为了方便起见，这里是完整的源代码，博览会链接:click here

Answer 1

import { useNavigation,DrawerActions } from '@react-navigation/native';

export default function DrawerNavigator(props) {
  // const {navigation} = props
  const navigation = useNavigation();
  const openDrawer = () => navigation.dispatch(DrawerActions.openDrawer());

  return (
    <Drawer.Navigator
      useLegacyImplementation
      screenOptions={{
        headerLeft: () => (
          <TouchableOpacity onPress={openDrawer}>
            <Image
              source={require('../assets/menu.png')}
              style={{ height: 20, width: 20 }}
            />
          </TouchableOpacity>
        ),
      }}>
      <Drawer.Screen name="Feed" component={Feed} options={{}} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

https://snack.expo.dev/hyt2VDjqB

请尝试一下:)这有效

希望对你有帮助，如有疑问请放心