Как вызвать toggleDrawer в React Navigation 5

У меня есть меню ящика React-Navigation 5, работающее с помощью жестов, но я также хочу добавить значок в правой части заголовка, чтобы переключать меню ящика.

У меня в App.js настройка навигации такая:

import {NavigationContainer, DrawerActions} from '@react-navigation/native';
//....... other imports

const HomeStack = createStackNavigator();
const HomeStackScreens = () => (
  <HomeStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: '#5C6BC0',
      },
      headerTintColor: '#fff',
      headerRight: () => {
        return (
          <TouchableOpacity
            onPress={() => DrawerActions.toggleDrawer()}>
            <Icon name="bars" color="#FFF" size={18} />
          </TouchableOpacity>
        );
      },
    }}>
    <HomeStack.Screen 
      name="Home"
      component={HomeScreen}
      options={{
        header:({scene, previous, navigation}) => {
          return (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
               <Icon name="bars" color="#FFF" size={18} />
            </TouchableOpacity>
          );
        }
      }}
    />
    <HomeStack.Screen name="Login" component={Login} />
    <HomeStack.Screen name="Register" component={Register} />
  </HomeStack.Navigator>
 );

 const ProfileStack = createStackNavigator();
 const ProfileStackScreens = () => (
   <ProfileStack.Navigator>
     <ProfileStack.Screen name="Profile" component={Profile} />
   </ProfileStack.Navigator>
 );

 const SettingStack = createStackNavigator();
 const SettingStackScreens = () => (
   <SettingStack.Navigator>
     <SettingStack.Screen name="Profile" component={Profile} />
   </SettingStack.Navigator>
 );

 const Drawer = createDrawerNavigator();
 const DrawerScreens = () => (
   <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackScreens} />
      <Drawer.Screen name="Profile" component={ProfileStackScreens} />
      <Drawer.Screen name="Settings" component={SetttingStackScreens} />
   </Drawer.Navigator>
 );

 class MyApp extends React.Component {
   render() {
     return (
       <NavigationContainer>
         <DrawerScreens />
       </NavigationContainer>
     );
   }
 }

 export default MyApp;

Все остальные мои экраны имеют форму «экспорт класса по умолчанию ScreenName extends React.Component». Они импортируются в App.js для настройки навигации. Начальный экран - Домой. Значок отображается правильно в правой части заголовка. Вызов DrawerActions.toggleDrawer () напрямую ничего не делает.

Я попробовал this.props.navigation.toggleDrawer (), и он выдает ошибку, потому что this.props не определен.

Как я могу вызвать toggleDrawer () с такой настройкой навигации? Любая помощь очень ценится!


react-native navigation-drawer react-navigation react-navigation-drawer
person Mochi08    schedule 28.04.2020    source источник
comment
вы можете получить доступ к объекту навигации следующим образом: reactnavigation.org/docs/stack-navigator/#header, а затем вызовите () = ›navigation.openDrawer (). Сообщите мне, если это сработает.   -  person getumangon    schedule 28.04.2020
comment
Спасибо за ответ! Это немного работает, но я не мог понять, как это правильно реализовать. Я обновил коды в своем исходном сообщении, чтобы добавить заголовок в настройку домашнего экрана. Часть navigation.toggleDrawer () работает, но я не мог понять, как включить в заголовок такие свойства, как title, headerRight. В ссылке используется ‹MyHeader /›, что меня смущает. Можете дать мне несколько советов? Спасибо!   -  person Mochi08    schedule 28.04.2020
comment
По моему мнению, вы можете поместить headerMode = none в свой Stack.Navigator и создать собственный ‹MyHeader /› и разместить свой предопределенный левый значок, правый значок и заголовок глобально. И вы можете использовать этот компонент заголовка на каждом экране.   -  person getumangon    schedule 29.04.2020
comment
Я думаю, что это потребует слишком больших изменений в моих кодах. Я оглядываюсь на ваш первый комментарий и понимаю, что если я каким-то образом смогу получить навигацию в headerRight, мне не нужно будет менять какой-либо код. Если я получу его прямо в headerRight, я получу undefined. Но что, если я получу его в его родительской опоре, то есть options или screenOptions. Я нашел документацию для опции получения 'маршрута' здесь: [ссылка] reactnavigation.org / docs / screen-options-resolution [/ link]. Если он может получить маршрут, он также может получить навигацию. Я попробовал и работает!   -  person Mochi08    schedule 29.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вот окончательное решение, которое я придумал, требующее минимальных изменений в моем исходном коде. Ключевым моментом является получение «навигации» в screenOptions или options, после чего я могу вызывать методы навигации в дочерних элементах screenOptions / options.

<HomeStack.Navigator
  screenOptions={({navigation}) => ({
  headerStyle: {
    backgroundColor: '#5C6BC0',
  },
  headerTintColor: '#fff',
  headerRight: () => {
    return (
      <TouchableOpacity
        style={{paddingRight: 8}}
        onPress={() => navigation.toggleDrawer()}>
        <Icon name="bars" color="#FFF" size={18} />
      </TouchableOpacity>
    );
  },
})}>
person Mochi08    schedule 29.04.2020