javascript - 未定义 ' this.props.navigation.state.props.p' 导航 react native

Question

我已经阅读了有关此问题的所有其他主题，但没有一个是解决我的问题的方法。

我不知道为什么，但是当我尝试导航时我无法将 props 传递给 react-navigation，我总是得到这个错误:

"Undefined ' this.props.navigation.state.props.p'"

这是我的代码:

import React from 'react'
import {View, Text, ActivityIndicator, StyleSheet} from 'react-native'
import * as firebase from 'firebase';

const config = {
    apiKey: "AIzaSyBeFuR40n7vp1XU9edL8PeOFq3UafKQ314",
    authDomain: "anylibrary-961e1.firebaseapp.com",
    databaseURL: "https://anylibrary-961e1.firebaseio.com",
    projectId: "anylibrary-961e1",
    storageBucket: "anylibrary-961e1.appspot.com",
    messagingSenderId: "482573837189"
};

export default class Loading extends React.Component {
    static navigationOptions = {
        header: null,
    };


    constructor(props) {
        super(props);
    }


    componentWillMount() {
        if (!firebase.apps.length) {
            firebase.initializeApp(config);
        }
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            const {navigate} = this.props.navigation;
            if (user) {
                navigate('UserArea', {p: 'Profile'});
            } else {
                navigate('MainPage');
            }
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Loading...</Text>
                <ActivityIndicator size="large"/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

和:

import React from 'react';
import {StyleSheet, View, Alert} from 'react-native';
import Profile from './Profile';
import Notifications from './Notifications';
import Search from './Search';
import Home from './Home';
import Tabbar from 'react-native-tabbar-bottom'
import * as firebase from 'firebase';

const config = {
    apiKey: "AIzaSyBeFuR40n7vp1XU9edL8PeOFq3UafKQ314",
    authDomain: "anylibrary-961e1.firebaseapp.com",
    databaseURL: "https://anylibrary-961e1.firebaseio.com",
    projectId: "anylibrary-961e1",
    storageBucket: "anylibrary-961e1.appspot.com",
    messagingSenderId: "482573837189"
};


export default class UserArea extends React.Component {
    static navigationOptions = {
        header: null,
    }

    constructor(props) {
        super(props);
        this.state = {
            page: this.props.navigation.state.props.p,
            name: '',
        }
    }

    componentWillMount(){
        if (!firebase.apps.length) {
            firebase.initializeApp(config);
        }
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
             this.state.name = user.displayName;
        })
    }

    render() {

        return (
            <View style={styles.container}>
                {this.state.page === "Home" && <Home navigation={this.props.navigation}>Home</Home>}
                {this.state.page === "Profile" && <Profile navigation={this.props.navigation}>Profile</Profile>}
                {this.state.page === "Notifications" &&   <Notifications navigation={this.props.navigation}>Notifications</Notifications>}
                {this.state.page === "Search" && <Search navigation={this.props.navigation}>Search</Search>}

                <Tabbar
                    stateFunc={(tab) => {
                        this.setState({page: tab.page})
                        //this.props.navigation.setParams({tabTitle: tab.title})
                    }}
                    activePage={this.state.page}
                    tabbarBgColor='#00619A'
                    iconColor='#99c2ff'
                    tabs={[
                        {
                            page: "Home",
                            icon: "home",
                            iconText: "Home"
                        },
                        {
                            page: "Profile",
                            icon: "person",
                            iconText: "Profile"
                        },
                        {
                            page: "Notifications",
                            icon: "notifications",
                            badgeNumber: 0,
                            iconText: "Notifications"
                        },
                        {
                            page: "Search",
                            icon: "search",
                            iconText: "Search"
                        },
                    ]}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

基本上我是这样发送的:

navigate('UserArea', {p: 'Profile'});

并尝试像这样访问它:

page: this.props.navigation.state.props.p,

有人吗？

问题出在哪里？

我做错了什么？

Answer 1

从文档来看，这看起来像是获取路由参数的正确方法

this.props.navigation.state.params.p

https://reactnavigation.org/docs/en/navigation-prop.html