当从react NavigationContainer调用时，组件不会加载

Question

我正在尝试创建一个汉堡导航，将我导航到组件页面，但是在调用该页面时无法正确加载该页面。似乎进入了页面componentDidMount（）函数，但不会加载其他任何内容。这是导航汉堡菜单代码

//Navigation Drawer
import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

//react and ui/ux components
import React from 'react';
import {
   //Blah blah blah
} from 'react-native';

import TodaysJobs from '../views/TodaysJobs';
import TomorrowsJobs from '../views/TomorrowsJobs';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label="Help" onPress={() => {
            console.log('Navigating to: Today\'s Jobs Original')
            props.navigation.navigate('TodaysJobs')
        }} />
    </DrawerContentScrollView>
  );
}

//create component
class Navigation extends React.Component {

    //disable navigation bar
    static navigationOptions = { headerShown: false }

    render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Feed" drawerContent={props => CustomDrawerContent(props)}>
                      <Drawer.Screen name="Feed" component={Feed} />
                      <Drawer.Screen name="TodaysJobs" component={TodaysJobs} />
                </Drawer.Navigator>
            </NavigationContainer>
        );
    }
}

export default Navigation;

[每当我尝试加载TodaysJobs时，它就会进入加载屏幕，并说通过控制台日志安装的组件只是永久加载。我的其他控制台日志均未显示包含componentDidLoad的任何日志。这是页面代码...

/

/loading wait spinner overlay
import Loader from '../components/Loader'

//react and ui/ux components
import React from 'react'
import {
    ...Stuff here
} from 'react-native'

//create component
class TodaysJobs extends React.Component {

    constructor(props) {
        ...stuff here

        this.componentDidLoad = this.componentDidLoad.bind(this)
        this.componentDidUnload = this.componentDidUnload.bind(this)
    }

    componentDidMount(){
        console.log('Today\'s Jobs component mounted')  //THIS GETS CALLED
        this.props.navigation.addListener('willFocus', this.componentDidLoad)
    }

    componentDidLoad() {
        console.log('Today\'s Jobs component loaded') //THIS DOES NOT

        //FIREBASE CALLS

        this.setState({
            loading: false
        })
    }

    render() {

        return (
            <View>
                <Loader loading={this.state.loading} /> //THIS LOADER CONSTANTLY SPINS
                { !this.state.loading
                    <Mapping
                        //Mapping props
                    />
                }
            </View>
        )
    }
}

export default TodaysJobs

所以它似乎可以导航到它，但是只是将其发布出去。我可以用<CustomButton text={"Today's Jobs"} onPress={() => { this.props.navigation.navigate('TodaysJobs') }}/>使用它，但是现在我想要一个汉堡导航而不是一个按钮页面，所以不确定按钮和汉堡导航之间的区别是什么。

请帮助。谢谢

Answer 1

因此事实证明，如果我更改this.props.navigation.addListener('willFocus', this.componentDidLoad)至this.props.navigation.addListener('willFocus', this.componentDidLoad())

任何人都知道为什么我现在需要将其作为函数来调用吗？

谢谢