Question

我试图使用抽屉导航。我有header.js组件，其中有一个汉堡包图标可以打开左侧导航菜单

//Header.js

 import React from 'react';
 import { Text, View, Image, TouchableHighlight} from 'react-native';
 import { DrawerNavigator  } from 'react-navigation';


 // Make a component
 const Header = (props, {navigate}) => {
 const { textStyle, viewStyle, imgstyle } = styles;

 return (
<View style={viewStyle}>

  <TouchableHighlight onPress={()=> this.props.navigation.navigate('DrawerToggle')}> //here the error is coming
       <Image style={{width:40, height:40}} 
     source={require('./../media/hamburger.png')}
              />
  </TouchableHighlight>

  <Text style={textStyle}>{props.headerText}</Text>
</View>
 );
};
export default Header;

这是App.js

    const MyApp = DrawerNavigator({
       Login: {
          screen: Login,
       },
       Signup: {
          screen: Signup,
       },
    });

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

这是comoponent Login.js之一

import React, { Component } from 'react';
import {
  Text, View, StyleSheet
 } from 'react-native';
import Header from './Header';

export default class Login extends Component{
static navigationOptions = {
    drawerLabel: 'Login',
 };
render(){
    return(
        <View >
            <Header headerText={'Login'}/>
            <Text>Login Screen</Text>
        </View>
         );
       }
}

我不确定我缺少什么来解决这个问题。请检查我的代码。我已经尝试过没有“这个”，如

 props.navigation.navigate('DrawerToggle')

但无法解决此问题。

undefined this.props.navigation.navigate（'screen'），如何解决？

0 个答案: