javascript - 未定义的“this.props.navigation.state.props.p”导航反应原生
问题描述
我已阅读有关此问题的所有其他主题,但没有人能解决我的问题。
我不知道为什么,但是当我尝试导航时,我无法将道具传递给 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.props.navigation.state.params.p
推荐阅读
- laravel - 如何在 Laravel 中编写用于检查邮件正文的测试用例
- docker - 锚引擎图像扫描 - 如何跳过某些提要?
- vscode-remote - 在 VSCode 远程开发容器中运行时如何让 VSCode Liveshare 扩展工作
- python - 如何将列表列表转换为 numpy 矩阵?
- excel - 我需要创建第二个 Scripting.Dictionary 吗?
- angular - 如何显示已在 Angular 8 中销毁的动态组件?
- multithreading - Kotlin 实现多线程请求对冲?
- d - 堆分配任何东西的语法?
- ansible - Ansible 安装模块仅检查状态而不报告状态
- java - MS Edge Chromium webdriver 从 79.309.12 开始崩溃