How can I fix this - undefined is not an object (evaluating 'label.toUpperCase')

问题

How can I fix this error in React Navigation V3?....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

Here is my code:

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);

Here is the Error:

回答1:

Create a new file call it MyHeaderButtons.js and use MaterialHeaderButtons instead of 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}
    />
  );
};

replace import HeaderButtons from 'react-navigation-header-buttons'; from your imports with 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';

Remove

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

use

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

To use the hamburger menu with the following component

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} />,

working demo

来源：https://stackoverflow.com/questions/55942559/how-can-i-fix-this-undefined-is-not-an-object-evaluating-label-touppercase

标签

react-native

react-navigation