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

Question

我想从导航抽屉的一个屏幕导航到另一个屏幕，但出现错误

类型错误：未定义不是对象（评估“this.props.navigation.navigate”）

不知道为什么？

这是我的代码：

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

标签： navigationundefinedtypeerrordrawerreact-native-paper

Answer 1

采用

const {navigate} = navigation;

代替

const {navigate} = this.props.navigation;