Question

所有，我有一个问题，我的堆栈导航未显示任何屏幕。我有“注册”和“登录”屏幕，并构建了一个堆栈导航器（即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;

当我尝试分别返回“登录”或“注册”时，它将正确地分别显示页面。

非常感谢您！

Answer 1

您已经创建了StartNavigator，它只有两个屏幕“ Login”和“ Singup”。并且您已将initialRouteName设置为“登录”。因此，您的“应用程序”组件从未调用。因此，您在App组件上编写的所有代码都永远不会运行。要进行此操作，请在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;

Answer 2

从服务器接收数据后，您是否检查条件？

'loggedIn'的值是什么？

我认为'loggedIn'的值不正确，或者您的切换用例不起作用。

在执行任何条件之前，请使用console.log以确保'loggedIn'的值正确。

反应本机堆栈导航不显示右屏幕

这是App.js

这是startStack.js

2 个答案: