我想从一个屏幕导航到另一个屏幕，但我有 undefined is not an object （评估'this.props.navigation.navigate'）

Question

I want to navigate from navigation drawer one screen to another screen but I am having an error

Type Error: undefined is not an object (evaluating 'this.props.navigation.navigate')

don't know why?

Here is my code:

import React, { useState } from 'react';
import { View } from 'react-native';
import { Drawer, Appbar, Divider } from 'react-native-paper';
import style from './menu.style';
import popularposts from './popularposts';

export default Menu = ({onMenuToggle, options, navigation}) => {
    const [active, setActive] = useState('home');
    const {navigate} = this.props.navigation;
    return (
       <View style={style.container}>
       <Appbar.Header>
            <Appbar.Content></Appbar.Content>
            <Appbar.Action icon="close" onPress={onMenuToggle} />
        </Appbar.Header>
            <Drawer.Section>
             <Drawer.Item
                label="Popular Post"
                active={active === 'first'}
                onPress={() => navigate('popularposts')}
                />
                <Drawer.Item
                label="Important Dates/ Events"
                active={active === 'second'}
                onPress={() => { setActive('second'); }}
                />
                <Divider />
                <Drawer.Item
                label="SIGN OUT"
                active={active === 'fourth'}
                onPress={() => { setActive('fourth'); }}
                />
            </Drawer.Section>
       </View>
    )
}

Answer 1

Use

const {navigate} = navigation;

Instead of

const {navigate} = this.props.navigation;