Как вызвать toggleDrawer в React Navigation 5 - PullRequest
Новая
       58

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

0 голосов
/ 28 апреля 2020

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

У меня есть настройки навигации в моем Приложение. 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". Они импортированы в приложение. js для настройки навигации. Начальный экран Home. Значок правильно отображается в правой части заголовка. Вызов «DrawerActions.toggleDrawer ()» напрямую ничего не делает.

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

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

1 Ответ

0 голосов
/ 29 апреля 2020

Вот окончательное решение, которое я придумаю, которое требует минимальных изменений в моем исходном коде. Ключ должен получить «навигацию» в screenOptions или опциях, затем я могу вызвать методы навигации в потомках 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>
    );
  },
})}>
...