反应本机导航打开从标题按钮绘制答案

【问题标题】：React Native Navigation Open Draw From Header Button反应本机导航打开从标题按钮绘制
【发布时间】：2018-05-21 01:13:03
【问题描述】：

我正在尝试从堆栈导航标题按钮打开导航绘图。标题按钮显示正常，但是当我单击按钮时，我得到了

undefined 不是对象（评估 '_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>
        ),
      })
    },
  },
);

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

this.props 仅在反应类中使用。我假设您使用的是 react-navigation 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>
        ),
      })
    },
  },
);

【讨论】：