React Native Navigation Открыть Draw From Header Button

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

undefined is not an object (evaluating '_this.props.navigate')

Кажется, я не могу найти убедительного примера того, как это сделать, или даже если это возможно с реактивной навигацией.

import React, { Component } from 'react';
import { createStackNavigator, NavigationActions } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Draw } from './DrawNav.js'

export const RootStack = createStackNavigator (
  {
    DrawNav: {
      screen: Draw,
      navigationOptions: ({ navigation }) => ({
        //Hide the shadow of the header
        headerStyle: {
          elevation:0,
          shadowColor: 'transparent',
          shadowRadius: 0,
          shadowOffset: {
            height: 0,
          }
        },
        headerLeft: (
          <View style = {{marginLeft: 10}}>
            <Icon
              name = "menu"
              size = {25}
              color = "#D4AF37"
              onPress = {() => this.props.navigation.openDrawer()}
            />
          </View>
        ),
      })
    },
  },
);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
2 164
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

this.props используется только в классе реакции. Я предполагаю, что вы используете реакцию-навигацию v2, тогда вам следует отправить DrawerAction, как показано ниже

import React, { Component } from 'react';
import { createStackNavigator, NavigationActions } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { DrawerActions } from 'react-navigation';
import { Draw } from './DrawNav.js'

  export const RootStack = createStackNavigator (
  {
    DrawNav: {
      screen: Draw,
      navigationOptions: ({ navigation }) => ({
        //Hide the shadow of the header
        headerStyle: {
          elevation:0,
          shadowColor: 'transparent',
          shadowRadius: 0,
          shadowOffset: {
            height: 0,
          }
        },
        headerLeft: (
          <View style = {{marginLeft: 10}}>
            <Icon
              name = "menu"
              size = {25}
              color = "#D4AF37"
              onPress = {() => navigation.dispatch(DrawerActions.openDrawer())}
            />
          </View>
        ),
      })
    },
  },
);

Другие вопросы по теме