当我尝试在 React Navigation 上进行 Firebase Auth 时收到一条消息，提示我正在尝试嵌套导航器

Question

我收到一条消息，说如果是故意的，请使用“independent = {true}”。我对此还很陌生，所以任何形式的帮助将不胜感激

这是我的应用程序。 js代码：

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(["Warning..."]);
LogBox.ignoreAllLogs();

import { AuthProvider, useAuth } from './pages/AuthContext';
import UnauthedStack from './pages/UnauthedStack';
import AuthStack from './pages/AuthStack';

const AppContent = () => {
  const { loggedInUser } = useAuth();
  return (
    <NavigationContainer>
      {loggedInUser ? <AuthStack /> : <UnauthedStack />}
    </NavigationContainer>
  );
};

export default function App () {
  return (
  <AuthProvider>
    <AppContent />
   </AuthProvider>
  )
}

我的AuthContext.js

import React from "react";

const AuthContext = React.createContext();

export const AuthProvider =({children}) => {
    const [loggedIn, setLoggedIn] = React.useState(null);

    return (
      <AuthContext.Provider value={{loggedIn, setLoggedIn}}>
        {children}
      </AuthContext.Provider>
    );
};

export const useAuth = () => React.useContext(AuthContext);
export default AuthContext;

我的AuthStack.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomePage from "./HomePage";

const Stack = createNativeStackNavigator();

export default function AuthStack ({navigation}){
    return(
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{headerShown:false}}>
            </Stack.Screen>
          </Stack.Navigator>
        </NavigationContainer>
    );
}

...最后是我的 UnauthedStack.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import LoginPage from "./LoginPage";
import RegisterPage from "./RegisterPage";

const Stack = createNativeStackNavigator();

export default function UnauthedStack ({navigation}) {
   return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Login">
            <Stack.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
    );
}

我尝试寻找在哪里放置“independent = {true}”，但到目前为止我还没有找到任何关于它的文档

Answer 1

整个应用程序只需要一个导航容器。

我发现您在 App.js、AuthStack.js 和 UnauthedStack.js 中使用了导航容器。

相反，仅将 Provider 组件保留在 App.js 中，并从其他两个组件中删除 Proivider。

此外，您不需要多个 Stack.Navigator，您可以只使用一个可以保留在 App.js 中的

我建议您创建

const Stack = createNativeStackNavigator();

仅一次，以便其实例仅在应用程序中创建一次。您可以将其保存在 App.js 中并从那里导出，例如，

export const Stack = createNativeStackNavigator();

然后将其导入到（AuthStack.js 和 UnauthedStack.js）的其他两个组件中

所以现在你的代码如下：

App.js

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(["Warning..."]);
LogBox.ignoreAllLogs();

import { AuthProvider, useAuth } from './pages/AuthContext';
import UnauthedStack from './pages/UnauthedStack';
import AuthStack from './pages/AuthStack';

export const Stack = createNativeStackNavigator();

const AppContent = () => {
  const { loggedInUser } = useAuth();
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
          {loggedInUser ? <AuthStack /> : <UnauthedStack />}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default function App () {
  return (
  <AuthProvider>
    <AppContent />
   </AuthProvider>
  )
}

我的AuthStack.js

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Stack } from "./App"; // Add path to App.js Component

import HomePage from "./HomePage";

export default function AuthStack ({navigation}){
    return(
          <>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{headerShown:false}}>
            </Stack.Screen>
          </>
    );
}

并且，

UnauthedStack.js

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { Stack } from "./App"; // Add path to App.js Component

import LoginPage from "./LoginPage";
import RegisterPage from "./RegisterPage";

export default function UnauthedStack ({navigation}) {
   return (
          <>
            <Stack.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
        </>
    );
}

请参阅此内容以了解有关使用反应导航创建身份验证流程的更多详细信息