Навигатор Трабл

Question

Добрый день, на самом деле я сохраняю ошибку при попытке навигации.

Это мой App.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) 

и вот мой Landing.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>

Может кто-нибудь сказать мне, как это исправить и объяснить, почему эта ошибка?из документации я видел this.props.создается в функции createnavigator

"undefined не является объектом - this.prop.navigation.navigate"

Answer 1

Проблема в том, что ваш HomePage компонент не является прямым потомком вашего stackNavigator.Вам нужно передать его через реквизит вашему дочернему компоненту, выполнив:

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

Внутри функции рендеринга вашего Landing.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