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

This error appears when the icon inside the header is pressed

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

更新

标题组件：

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

Error after update

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

在其他组件内部反应本机react-navigation变量

1 个答案: