Навигация по стеку React-native не показывает правильный экран

все, у меня проблема, что моя навигация по стеку не показывает экран. У меня есть экраны «регистрация» и «вход», и я создаю навигатор стека (который является startStack), пытаясь перемещаться между этими двумя экранами. Но это не работает. при первом входе пользователя (если он еще не вошел в систему) должен отображаться экран входа в систему.

Пожалуйста, помогите мне, я очень ценю, спасибо.

это App.js

import React, { Component } from "react";
import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Login from "./screens/login";
import Signup from "./screens/signup";
import MyOrders from "./screens/myOrders";
import firebase from "firebase";
import StartNavigator from "./routes/startStack";

class App extends Component {
  state = {
    loggedIn: null,
  };

  componentDidMount() {
    
    var firebaseConfig = {
      apiKey: "AIzaSyASR4GAXSRGsiDhOTF_UsdqHzqHYcHPk_U",
      authDomain: "onlineorderportal-68a8f.firebaseapp.com",
      databaseURL: "https://onlineorderportal-68a8f.firebaseio.com",
      projectId: "onlineorderportal-68a8f",
      storageBucket: "onlineorderportal-68a8f.appspot.com",
      messagingSenderId: "658149255251",
      appId: "1:658149255251:web:37940844cdc5403e173ea6",
      measurementId: "G-KGQ1F2F3WE",
    };
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    } else {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          
          this.setState({ loggedIn: true });
        } else {
          
          this.setState({ loggedIn: false });
        }
      });
    }
  }

  renderContent = () => {
    switch (this.state.loggedIn) {
      case false:
        console.log("false case login");
        // return <Login />;
        // return <Signup />;
        return <StartNavigator />;

      case true:
        console.log("true case Navigator");
        return <MyOrders />;
    }
  };

  render() {
    return (
      <View style={styles.container}>
        
        {this.renderContent()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

Это startStack.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import Login from "../screens/login";
import Signup from "../screens/signup";

const Stack = createStackNavigator();

function StartNavigator() {
  console.log("enter Start");
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default StartNavigator;

Когда я пытаюсь вернуть «Вход» или «Регистрация» отдельно, он правильно показывает страницы по отдельности.

Большое спасибо !!!


react-native stack-navigator react-navigation
person Qian Tang    schedule 24.06.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы создали StartNavigator, в котором есть только два экрана «Вход» и «Регистрация». И вы установили initialRouteName как «Логин». Таким образом, ваш компонент «Приложение» никогда не вызывался. Таким образом, весь код, который вы написали в компоненте приложения, никогда не запускается. Чтобы это работало, добавьте компонент App в свой StartNavigator и установите initialRouteName в приложение, как показано ниже:

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
import Login from "../screens/login";
import Signup from "../screens/signup";
import App from "../app/path"; // import App here

const Stack = createStackNavigator();

function StartNavigator() {
  console.log("enter Start");
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="App" component={App} /> // add app component
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default StartNavigator;
person Kishan Bharda    schedule 24.06.2020
comment
Спасибо за ваш ответ !!!!! Я пробовал, но все равно. Моя консоль выводит «введите Start», что означает, что приложение сначала запускает App.js, затем запускает StartNavigator, но в StartNavigator ничего не возвращает. - person Qian Tang; 24.06.2020

arrow_upward
0
arrow_downward

Проверяли ли вы условия после получения данных с сервера?

каково значение «loggedIn»?

Я думаю, что значение «loggedIn» неверно или ваш случай переключения не работает.

используйте console.log, прежде чем выполнять какое-либо условие, чтобы убедиться, что значение «loggedIn» правильное.

person Mohamad zare    schedule 24.06.2020
comment
Спасибо за ответ !!!!!!Да, это проблема. Сейчас использую другой метод. Я создаю новый firebase.js в другой папке, и инициализация происходит в новом firebase.js - person Qian Tang; 25.06.2020