Компонент не загружается при вызове из реагирования NavigationContainer - PullRequest
Новая
       61

Компонент не загружается при вызове из реагирования NavigationContainer

0 голосов
/ 24 февраля 2020

Я пытаюсь создать бургер-навигацию, чтобы перейти на страницы моего компонента, но я не могу заставить страницу загружаться правильно, когда она вызывается. Похоже, что для входа в функцию pageDidMount () страниц, но не будет загружать ничего другого. Вот код меню навигационного бургера 

//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') }}/>, но теперь я хочу навигацию по бургеру вместо страницы кнопок, поэтому не уверен, в чем разница между кнопкой и навигацией по бургеру.

Пожалуйста, помогите. Спасибо

1 Ответ

0 голосов
/ 24 февраля 2020

Получается, что это работает, если я изменяю this.props.navigation.addListener('willFocus', this.componentDidLoad) на this.props.navigation.addListener('willFocus', this.componentDidLoad())

Кто-нибудь знает, почему мне теперь нужно вызывать его как функцию?

Спасибо

...