Parent Navigator中的DrawerActions.toggleDrawer（）

Question

我具有如下嵌套的导航器结构-父元素是内部嵌套有抽屉的堆栈导航器。我需要通过“堆栈导航器”中的按钮切换打开的抽屉。

const Drawer = createDrawerNavigator();
function DrawerNav() {
  return (
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen
          name="Main"
          component={HomeScreen}
        />
        <Drawer.Screen
          name="Details"
          component={DetailsScreen}
        />
        <Drawer.Screen
          name="About"
          component={AboutScreen}
        />
    </Drawer.Navigator
  );
}

const Stack = createStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator
             initialRouteName="DrawerNav"
        >
            <Stack.Screen
                name="DrawerNav"
                component={DrawerNav}
                options={{
                   headerLeft: () => (
                      <Icon
                         style={{ padding: 10 }}
                         name="menu"
                         size={30}
                         color="#900"
                         onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                     />
                  ),
                }}
            />
        </Stack.Navigator>
     </NavigationContainer>
  );
}

我最接近Stack Navigator中当前的onpress，该东西应该可以切换子抽屉。但是，添加

const navigation = useNavigation();

进入App（）函数会产生以下错误

Error: Couldn't find a navigation object. Is your component inside a screen in a navigator?\\

总之，我需要通过其父级中的按钮来切换抽屉导航。很明显如何将导航操作传递给孩子，但是我很难做到这一点。

Answer 1

您可以使用以下代码通过按钮单击来切换抽屉-

onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}

`

Answer 2

options可以接受一个函数并为您提供参数，其中之一是navigation。这是代码：

options={({navigation}) => {
               headerLeft: () => (
                  <Icon
                     style={{ padding: 10 }}
                     name="menu"
                     size={30}
                     color="#900"
                     onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                 />
              ),
            }}

希望这会有所帮助。