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

Я хочу отображать значок меню 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);

react-native react-navigation react-navigation-drawer
person Inaccessible    schedule 09.05.2019    source источник
comment
Вы отправляете навигацию прямо в MenuButton. Попробуйте заменить этот props.navigation.openDrawer () на этот navigation.openDrawer ()   -  person Ashwin Mothilal    schedule 13.05.2019
comment
Не видно MyDrawerNavigator, объявленного в вашем основном AppNavigator. Попробуйте сделать drawerNavigator контейнером для вашего приложения.   -  person Nishant Nair    schedule 19.05.2019

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

  • openDrawer - открыть ящик
  • closeDrawer - закрыть ящик
  • toggleDrawer - переключить состояние, т.е. переключение с закрытого на открытое и наоборот
import { DrawerActions } from 'react-navigation-drawer';

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

react-navigation api не предоставляет дополнительной информации, но вы можете обратиться к справке по 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>
  )
};
person Fabrizio Bertoglio    schedule 14.05.2019
comment
Внутри MenuButton у «реквизита» нет никаких методов ящика. См. JSON ниже - person Inaccessible; 29.05.2019
comment
{навигация: {состояние: {routeName: Home, key: id-1559109520033-0}, действия: {}}} - person Inaccessible; 29.05.2019

arrow_upward
0
arrow_downward

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

person Rajesh Bhartia    schedule 15.05.2019