其他组件内部反应反应 - 引导变量

Question

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

我已经尝试添加

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

按下标题内的图标

时出现此错误

如何在标题组件内使用导航？预先感谢。

update

标题组件：

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