导航器故障

Question

下午好，实际上我在尝试导航时保持错误。

这是我的应用程序.js

import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from './src/Login';
import NuovoAccount from './src/NuovoAccount';
import HomePage from './src/HomePage';
import Lista_Sveglie from './src/Lista_Sveglie';
import NuovoAccount_2 from './src/NuovoAccount_2';
import Nuova_sveglia from './src/Nuova_sveglia';
import ScreenSveglia from './src/ScreenSveglia';
import Registra from './src/Registra';
import temp from './src/temp';
import Account from './src/Menu/Account';
import ElencoUtenti from './src/Menu/ElencoUtenti';
import MenuImpostazioni from './src/Menu/MenuImpostazioni';
import SelUtenteDest from './src/Menu/SelUtenteDest'
import Accedi from './src/Accedi'
import Landing from './Landing'
const AppNavigator = createStackNavigator(
{
Home: Landing,
Accedi : Accedi ,
Login: Login,
NuovoAccount: NuovoAccount,
HomePage: HomePage,
Lista_Sveglie: Lista_Sveglie,
NuovoAccount_2: NuovoAccount_2,
Nuova_sveglia: Nuova_sveglia,
ScreenSveglia: ScreenSveglia,
Registra: Registra,
temp: temp,
MenuImpostazioni: MenuImpostazioni,
ElencoUtenti: ElencoUtenti,
Account: Account,
SelUtenteDest: SelUtenteDest,
},
{
initialRouteName: "Home",
defaultNavigationOptions: {
headerTintColor: '#ccc',
headerStyle: {
borderBottomWidth: 4,
borderBottomColor: '#80ba27',
backgroundColor: '#364054',
},
headerTitleStyle: {
textAlign: 'center',
flex: 1
},

}
}
);
export default createAppContainer(AppNavigator) 

这是我的着陆.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, Button } from 'react-native';
import * as firebase from 'firebase';
import HomePage from './src/HomePage';
import Accedi from './src/Accedi'
import { createStackNavigator, createAppContainer } from "react-navigation";
export default class Landing extends Component {
constructor() {
super();
this.state = {
loggedIn: false,
}
}
componentWillMount() {
console.log("QUI ENTRA")
---some firebase config ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ loggedIn: true })
} else {
this.setState({ loggedIn: false })
}
})
}
render(){
if (this.state.loggedIn){
return <HomePage/>
}else{
return <Accedi/>
}
}
}

这里是我的主页

<View>
<Text
onPress={() => this.props.navigation.navigate('MenuImpostazioni')}
style={style.footer_text_icone}>Configura Impostazioni</Text>
</View>

谁能告诉我如何解决它并解释为什么会出现此错误？ 从文档中我看到了这个.props。在创建导航器功能上创建

"undefined 不是对象 - this.prop.navigation.navigate">

Answer 1

这里的问题是您的HomePage组件不是stackNavigator的直接子组件。您需要通过 props 将其传递给您的子组件，执行以下操作：

render(){
if (this.state.loggedIn){
return <HomePage navigation={this.props.navigation}/>
}else{
return <Accedi/>
}
}

在着陆的渲染功能中.js

然后，您的子组件将有权访问它。

发生这种情况是因为您使用相同的组件，既作为屏幕，又作为子组件。

{
Home: Landing,                  //Here (as child)
Accedi : Accedi ,
Login: Login,
NuovoAccount: NuovoAccount,
HomePage: HomePage,             //Here
Lista_Sveglie: Lista_Sveglie,
NuovoAccount_2: NuovoAccount_2,
Nuova_sveglia: Nuova_sveglia,
ScreenSveglia: ScreenSveglia,
Registra: Registra,
temp: temp,
MenuImpostazioni: MenuImpostazioni,
ElencoUtenti: ElencoUtenti,
Account: Account,
SelUtenteDest: SelUtenteDest,
}   

react-navigation不会仅仅因为它已在组件内部声明而提供对组件的导航访问权限。通过这样做，如果/否则您实际上是在创建同一组件的全新实例，唯一的区别是它无法访问this.props.navigation。

Answer 2

Landing.js

不是在堆栈导航器中定义的屏幕，因此它无法访问this.props.navigation。

如果您不希望在堆栈导航器中Landing.js，则可以按照本教程使用来自任何组件的navigate和其他导航操作：https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html