Как я могу это исправить - undefined не является объектом (оценка 'label.toUpperCase')

Question

Как я могу исправить эту ошибку в React Navigation V3? ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

Вот мой код:

import React, {Component} from 'react';
import { Dimensions, Button } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation'; 
import DrawerClose from './DrawerCloseButton'
import DrawerOpen from './DrawerOpenButton'
import HeaderButtons from 'react-navigation-header-buttons';
import Icon from 'react-native-vector-icons/Ionicons';


import HomeScreen from './HomeScreen';

const WIDTF = Dimensions.get('window').width;

const DrawerConfig = {
  drawerWidth: WIDTF*0.80,
  drawertType: 'back'    
}

const Drawer = createDrawerNavigator ({
Home: {
  screen: HomeScreen,
},
},
DrawerConfig
);

const MainNavigator = createStackNavigator({
  Drawermenu:{
    screen: Drawer,
    navigationOptions: ({ navigation }) => {
      const { state } = navigation;
      if (state.routes[ state.index ].key !== 'DrawerClose') {
        return {

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

export default createAppContainer (MainNavigator);

Вот ошибка:

Answer 1

Создайте новый файл, назовите его 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} />,

рабочая демонстрация