我该如何解决这个问题 - undefined 不是一个对象（评估“label.toUpperCase”）

创建一个新文件调用它MyHeaderButtons.js并使用MaterialHeaderButtons而不是HeaderButtons

// MyHeaderButtons.js

import * as React from 'react';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { HeaderButtons, HeaderButton } from 'react-navigation-header-buttons';

export const Item = HeaderButtons.Item;

// define IconComponent, color, sizes and OverflowIcon in one place
const MaterialHeaderButton = props => (
  <HeaderButton {...props} IconComponent={MaterialIcons} iconSize={23} color="blue" />
);

export const MaterialHeaderButtons = props => {
  return (
    <HeaderButtons
      HeaderButtonComponent={MaterialHeaderButton}
      OverflowIcon={<MaterialIcons name="more-vert" size={23} color="white" />}
      {...props}
    />
  );
};

import HeaderButtons from 'react-navigation-header-buttons';从您的进口替换为import { MaterialHeaderButtons, Item } from './MyHeaderButtons'

import React, {Component} from 'react';
import { Dimensions, Button } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerActions } from 'react-navigation'; 
import DrawerClose from './DrawerCloseButton'
import DrawerOpen from './DrawerOpenButton'
import { MaterialHeaderButtons, Item } from './MyHeaderButtons'; // new import
import Icon from 'react-native-vector-icons/Ionicons';

去掉

<HeaderButtons IconComponent={ Icon } iconSize={ 24 } color={ 'black' }>
  <HeaderButtons.Item iconName="close" onPress={ () => navigation.navigate('DrawerToggle') } />
</HeaderButtons>

用

<MaterialHeaderButtons IconComponent={Icon} iconSize={24} color={'black'}>
  <Item
       iconName="close"
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}/>
</MaterialHeaderButtons>

使用具有以下组件的汉堡菜单

class MenuButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  onPress = () => {
    this.setState({ active: !this.state.active });
    this.props.navigation.dispatch(DrawerActions.toggleDrawer());   
  };
  render() {
    return (
      <React.Fragment>
        <Hamburger
          active={this.state.active}
          type="cross"
          onPress={this.onPress}
        />
      </React.Fragment>
    );
  }
}

headerLeft: <MenuButton navigation={navigation} />,

工作演示