只出现一个 Stack.Navigator

Question

我正在 ReactNative 中创建一个应用程序，我在两个单独的导航容器中有两个堆栈导航器，一个用于 login/registering 用户，另一个用于从搜索页面到详细信息页面。

我想知道的是，当应用程序启动时，登录页面应该是用户首先看到的。然而，现在有了我的两个堆栈导航器，这就是移动应用程序的样子：

这是来自我的两个 Stack Navigator 的代码，任何关于我如何重构我的代码以便屏幕不被分割而是在应用程序启动时只出现一个 Stack Navigator 的见解将不胜感激！

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Button, View, Text } from "react-native";
import Post from "./src/components/Post";
import AppContext from  "./src/components/AppContext";

import LoginScreen from "./src/screens/Login";
import RegisterScreen from "./src/screens/Register";
import SearchScreen from "./src/screens/Search";
import ShowDetailsScreen from "./src/screens/ShowDetails";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React, { useState } from 'react';

export default function App() {
  
  const [token, setToken] = useState("");
  const userSettings = {
    token: "",
    setToken,
  };
  
  const Stack = createNativeStackNavigator();

  return (
    <AppContext.Provider value={userSettings}>
      <NavigationContainer>

      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen}/>
        <Stack.Screen name="Register" component={RegisterScreen}/>
     
      </Stack.Navigator> 
      </NavigationContainer>

      <NavigationContainer>

        <Stack.Navigator>
          <Stack.Screen
            name="Search"
            component={SearchScreen}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="Show Details" component={ShowDetailsScreen} />
        </Stack.Navigator>

        <StatusBar style="dark" />

      </NavigationContainer>
    </AppContext.Provider>
  );
}


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

Answer 1

您的代码存在问题，您同时显示了两个堆栈。您需要做的是，您应该有某种方式来了解用户是否已注册，并根据该方式显示注册屏幕或搜索屏幕。 Here 是如何做到这一点的一个很好的例子（但你不必完全那样实施。这只是为了你的理解）

Answer 2

我想推荐一种不同的方法。我们可以创建一个状态来处理您想要的，而不是创建两个单独的 NavigationContainer 和两个不同的 StackNavigator。

事实上，我们可以利用这样一个事实，即未签名的用户还没有令牌，而令牌已经作为状态存在于您的应用程序中。

考虑以下因素。

export default function App() {
  
  const [token, setToken] = useState();
  const userSettings = {
    token: "",
    setToken,
  };
  
  const Stack = createNativeStackNavigator();

  return (
    <AppContext.Provider value={userSettings}>
      <NavigationContainer>
          <Stack.Navigator>
            
            {token ?
               <Stack.Screen name="Login" component={LoginScreen}/>
               <Stack.Screen name="Register" component={RegisterScreen}/>
               : <Stack.Screen
                  name="Search"
                  component={SearchScreen}
                  options={{ headerShown: false }}
                  />
                 <Stack.Screen name="Show Details" component={ShowDetailsScreen} />}
          </Stack.Navigator>
        <StatusBar style="dark" />
      </NavigationContainer>
    </AppContext.Provider>
  );
}

我现在看不到你是如何设置令牌的，但我想状态会在用户登录后发生变化。否则，您可以创建一个单独的 isSignedIn 状态，其 setter 函数将作为道具传递到登录屏幕。

这个其实是react-native-navigation推荐的。

只出现一个 Stack.Navigator

Make only one Stack.Navigator show up

react-native

stack-navigator