react-native - 我该如何解决这个问题 - 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);

这是错误：

标签： react-nativereact-navigation

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

工作演示