Question

我正在接收-undefined不是对象（正在评估'this.props.navigation.navigate'）。我知道已经有关于此问题的一些答案，但是我没有找到关于Drawer Navigator的任何答案，我发现的全部都是关于Stack Navigator的。（我正在使用反应导航V3）这是我的DrawerNavigator.js：

import React from 'react';
import { Platform, Dimensions, Button, View, Text } from 'react-native';
import { createDrawerNavigator, createAppContainer, StackNavigator, withNavigation } from 'react-navigation';
import {Header} from 'react-native-elements';
import Hamburger from 'react-native-animated-hamburger';

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

  }
  render () {
    const { navigate } = this.props.navigation;
      return (
          <React.Fragment>   
          <Hamburger active={this.state.active}
     type="cross"
     onPress={() => this.setState({active: !this.state.active}) || navigate('DrawerOpen')} 
     />   
          </React.Fragment>
      )
  }
}


class HomeScreen extends React.Component {
    render() {
      return (
        <React.Fragment>
          <Header
          leftComponent={<MenuButton1 />}
          />

        <View style={{top: 30 }}>
            <Text> Hello </Text>
        </View>
        </React.Fragment>
      );
    }
  }



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

const DrawerConfig = {
    drawerWidth: WIDTF*0.80,
    draertType: 'slide'    
}

const DrawerNavigator = createDrawerNavigator ({
    HomeScreen: {
      screen: HomeScreen,

    }
},
  DrawerConfig
);


export default createAppContainer (DrawerNavigator);

还有我的App.js：

import React, {Component} from 'react';
import DrawerNavigator from './components/DrawerNavigator';

export default class App extends React.Component {
  render() {
    return (
      <React.Fragment>
      <DrawerNavigator />
      </React.Fragment>
    );
  }
}

问题：

enter image description here

Answer 1

导航对象仅在作为抽屉式导航器直接子级的屏幕上可用

您可以将MenuButton1与withNavigation一起包装以访问导航对象...或简单地将导航逻辑包装在一个方法中，并将其作为道具传递给MenuButton喜欢：

class MenuButton1 extends React.Component {
  constructor(props) {
    // ...
  }

  render() {
    const { onDrawerOpen } = this.props;
    return (
      <React.Fragment>
        <Hamburger
          active={this.state.active}
          type="cross"
          onPress={() => this.setState({ active: !this.state.active }) || onDrawerOpen()
          }
        />
      </React.Fragment>
    );
  }
}

-

class HomeScreen extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header
          leftComponent={(
            <MenuButton1
              onDrawerOpen={() => this.props.navigation.openDrawer()}
            />
)}
        />

        <View style={{ top: 30 }}>
          <Text> Hello </Text>
        </View>
      </React.Fragment>
    );
  }
}

未定义不是对象（评估'this.props.navigation.navigate'）-抽屉导航器

1 个答案: