未定義的'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 - 使用回退獲取特定參數值

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

如果 name 或 param 未定義，則將后備設置為 Peter。

Answer 4

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

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