Невозможно перейти к маршруту из стека навигации.

Question

У меня есть один файл со всем моим стеком навигации. В моем заголовке навигации у меня есть меню, и я хочу открыть ящик. Теперь в этом примере я получаю ошибку: Cannot read property 'navigation' of undefined

Мой файл навигации приложения:

import React from 'react';
import { Text } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import  Login from '../components/Login';
import Dashboard from '../components/Dashboard';
import NewNotification from '../components/NewNotification';


const GuestStack = createStackNavigator(
  {
    loginScreen: { screen: Login },
  }, { 
    headerMode: 'float',
    headerLayoutPreset: 'center',
    navigationOptions: {
      headerStyle: { backgroundColor: '#61b1cd' },
      title: 'Welcome',
      headerTintColor: 'black',
    },
  },
);

const LoggedinStack = createDrawerNavigator({
  dashboard: { screen: Dashboard },
  newNotifciation: { screen: NewNotification },
});

const LoggedinNavigation = createStackNavigator(
  {
    LoggedinStack: { screen: LoggedinStack },
  }, {
    headerMode: 'float',
    navigationOptions: {
      headerStyle: { backgroundColor: '#61b1cd' },
      title: 'Welkom!',
      headerTintColor: 'black',
      headerLeft: <Text onPress = { () =>
        this.props.navigation.openDrawer('dashboard')
//  navigation.openDrawer('dashboard')
       }>Menu</Text>,
    },
  },
);

const VveNavigator = createStackNavigator(
  {
    guestStack: {
      screen: GuestStack,
    },
    loggedinStack: {
      screen: LoggedinNavigation,
    },
  }, {
    headerMode: 'none',
    initialRouteName: 'guestStack',
  },
);

export default AppNavigator;

Проблема вроде бы здесь:

headerLeft: <Text onPress = { () =>
            this.props.navigation.openDrawer('dashboard')
    //  navigation.openDrawer('dashboard')
           }>Menu</Text>,

А потом в моем App.js у меня есть

export default class App extends React.Component {
  render() {
    return (
      <APPNavigator />
    );
  }
}

Версия реакции навигации: 2.18.1

Спасибо

Answer 1

headerLeft не получает navigation проп (проверьте исходный код ). Поэтому, если вы хотите использовать навигационную опору при печати, вам следует подумать о рефакторинге вашей конфигурации стекового навигатора:

const LoggedinNavigation = createStackNavigator(
  {
    LoggedinStack: { screen: LoggedinStack },
  }, {
    headerMode: 'float',
    navigationOptions: ({ navigation }) => ({ // here you get the navigation
      headerStyle: { backgroundColor: '#61b1cd' },
      title: 'Welkom!',
      headerTintColor: 'black',
      headerLeft: (
        <Text
          onPress={() => {
            navigation.openDrawer()
          }}
        >
          Menu
        </Text>
      ),
    }),
  },
);

Проверьте эту проблему для дополнительных параметров.