未定义的“this.props.navigation.state.props.p”导航反应原生

Question

我已阅读有关此问题的所有其他主题，但没有人能解决我的问题。

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

“未定义'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

Answer 2

旧方法是

this.props.navigation.state.params

新方法是

this.props.route.params

我使用 rn 版本 0.62， 反应导航版-5

Answer 3

试试这个：

 page: this.props.navigation.state.p

我建议您使用 getParam - 使用 fallback

获取特定的参数值

const name = this.props.navigation.getParam('name', 'Peter');

如果 name 或 param 未定义，则将 fallback 设置为 Peter。

Answer 4

如果使用 react-navigation v5，请使用

const data = route.params?.someParam ?? 'defaultValue';