React-native 堆棧導航未顯示右側屏幕

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 ，它只有兩個屏幕“登錄”和“登錄”。 並且您已將initialRouteName設置為“登錄”。 所以你的“App”組件永遠不會被調用。 因此，您在 App 組件上編寫的所有代碼都不會運行。 要在StartNavigator中添加App組件，並將initialRouteName設置為 app，如下所示：

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' 的值不正確，或者您的 switch case 不工作。

在執行任何條件之前使用 console.log 以確保 'loggedIn' 的值是正確的。