react-native - 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-nativereact-navigationstack-navigator

react-native - React-native 堆栈导航未显示正确的屏幕

问题描述

这是 App.js

这是 startStack.js

解决方案

推荐阅读