在其他组件中反应本机反应导航变量

Question

在我的标题组件中，有一个菜单图标。 当我按下图标时，它应该打开DrawerNavigation。

我已经尝试添加

const { navigate } = this.props.navigation;

但不幸的是，它不能解决问题。

我的标头组件：

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

我的主屏幕上，导入了标题组件：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

当按下标题内的图标时，会出现此错误

如何使用标题组件中的导航？ 提前致谢。

更新资料

标头组件：

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {

        const { navigate } = this.props.navigation;

        return (
            <View style={styles.header}>
                <Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

主屏幕：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header navigation={this.props.navigation} />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

更新后发生错误

Answer 1

您需要像这样将导航对象传递到标头组件

<Header navigation={this.props.navigation} />

您的标头组件现在应该是这样的

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
    openDrawer() {
      this.props.navigation.navigate('DrawerToggle');
    }
}