реагировать на навигацию - иконка DrawerNavigator для заголовка внутри TabNavigator-> StackNavigator

Question

Я хочу, чтобы значок меню HeaderLeft глобально отображался на всех экранах. Когда я нажимаю на иконку меню, мне нужно отобразить меню ящика. Я использую методы OpenDrawer, CloseDrawer для открытия / закрытия ящика меню.

Но я всегда получаю "undefined is not a function (evaluating 'props.navigation.openDrawer()')". Я также попробовал следующее

props.navigation.dispatch(DrawerActions.openDrawer())
props.navigation.navigate(openDrawer())

Но ничего из вышеперечисленного не сработало. Вот мой частичный код

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => { props.navigation.dispatch(DrawerActions.openDrawer())} }>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};

const MyDrawerNavigator = createDrawerNavigator(
  {
    Wishist: {
      screen: wishlist
    },
  },
  {
    contentComponent: SideMenuScreen,
    drawerWidth: 200,
  }
);

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: createStackNavigator({
      Home: {
        screen: Home
      },
      Contact: {
        screen: Contact
      }
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
        },
        headerTitle: headerTitleNavigationOptions('HOME'),
        headerLeft: <MenuButton navigation={navigation}/>,
        headerRight: headerRightNavigatorOptions(navigation)
      })
    }),
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
      },
    }),
  }},
  {
    tabBarOptions: {
      showLabel: false,
      style: {
        backgroundColor: 'white',
        borderTopWidth:1
      }
    },
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

const App = createAppContainer(AppNavigator);

Answer 1

вам нужно импортировать DrawerActions в ваш компонент из react-navigation-drawer , как описано в документации

DrawerActions - это объект, содержащий методы для генерации действий, специфичных для навигаторов на основе ящиков. Его методы расширяют действия, доступные в NavigationActions.

Поддерживаются следующие действия:

• openDrawer - открыть ящик
• closeDrawer - закрыть ящик
• toggleDrawer - переключение состояния, т.е. переключиться с закрытого на открытый и наоборот

---

import { DrawerActions } from 'react-navigation-drawer';

this.props.navigation.dispatch(DrawerActions.openDrawer())

API react-navigation не предоставляют больше информации, но вы можете обратиться к справочнику NavigationActions API для получения дополнительной информации.

NavigationActions, ссылка

Все NavigationActions возвращают объект, который можно отправить на маршрутизатор с помощью метода navigation.dispatch().

Обратите внимание, что если вы хотите отправить react-navigation действий, вам следует использовать создателей действий, представленных в этой библиотеке.

Вам нужно импортировать NavigationActions в свой компонент, а затем вы можете dispatch сделать что-то вроде this.props.navigation.dispatch(navigateAction);

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);

также, как объяснено в Ashwin Mothilal , убедитесь, что вы пропускаете navigation опору внутри вашего компонента. Например, вы можете запустить console.warn(props) и сразу увидеть результат на эмуляторе. Это ваш компонент:

import { DrawerActions } from 'react-navigation-drawer';

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => {
          console.warn(props);
          props.navigation.dispatch(DrawerActions.openDrawer());
      }}>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};

Answer 2

Сначала просто утешите реквизиты в кнопке Меню и проверьте, есть ли у вас openDrawer или closeDrawer или любой другой метод, который вы ищете, затем вы можете вызвать его.