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

我不确定我缺少什么来解决这个问题。请检查我的代码。

编辑：

我试过没有＆＃34;这个＆＃34;但没有运气。我在网上到处检查，但无法找到确切的解决方案，或者我无法找到解决方案。那个善于回应本地人的人可以对此作出回应吗？

Answer 1

问题是 - 您在无状态组件中使用this关键字：this.props.navigation.navigate('DrawerToggle')。

请尝试props.navigation.navigate('DrawerToggle')，因为this未指向您案例中的Header组件实例。

无状态组件中的

this是从调用范围“继承”的（因为无状态组件是"arrow" function），可能指向window或global。

undefined this.props.nnavigation.navigate（＆＃39; screen＆＃39;），如何解决？

1 个答案: