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

Текущее нажатие в Навигаторе стека является наиболее близким к чему-то, что должно работать для переключения дочернего ящика. Однако добавление

const navigation = useNavigation();

в функцию App () приводит к следующей ошибке

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

В итоге мне нужно переключить навигацию по ящикам через кнопку в родительском элементе. Понятно, как передать навигационные действия детям, но мне трудно делать это по-другому.

Answer 1

options может взять функцию и предоставить аргументы для вас, одним из которых является navigation. Вот код:

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

Надеюсь, это поможет.

Answer 2

Вы можете переключать Ящик нажатием кнопки, используя следующий код:

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

`