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

Posted 2023-04-13

【中文标题】未定义的“this.props.navigation.state.props.p”导航反应原生

【英文标题】：Undefined ' this.props.navigation.state.props.p' navigation react-native

【发布时间】：2018-11-11 07:58:39

【问题描述】：

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

我不知道为什么，但是当我尝试导航时，我无法将 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,

有人吗？

问题出在哪里？

我做错了什么？

【问题讨论】：

可能你的链中的某个元素为空

一切正常，似乎没有什么是空的。如果我不想传递道具，我直接输入“页面：'个人资料'”，一切正常......

您是否尝试从构造函数中删除 this？ page: props.navigation.state.props.p,

【参考方案1】：

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

this.props.navigation.state.params.p

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

【讨论】：

“p”是保留字吗？要么？我将其更改为“mypage”，现在可以正常工作了...但我仍然不明白为什么它以前不起作用...

这不是保留字，可能你的代码中还有其他错误:)

【参考方案2】：

旧方法是

this.props.navigation.state.params

新方法是

this.props.route.params

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

【参考方案3】：

试试这个：

 page: this.props.navigation.state.p

我建议您使用 getParam - 使用 fallback

获取特定的参数值

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

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

【讨论】：

我尝试了所有可能的方法来获取参数，从文档和其他关于这个错误的话题。就像我上面说的，通过更改道具的名称来解决，没有意义，但工作正常谢谢大家！

【参考方案4】：

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

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