React Navigation：在 React Native 中使用 navigation.replace 处理嵌套导航的错误

Question

我正在使用 React Navigation 开发 React Native 应用程序，在用户身份验证后尝试导航到嵌套屏幕时遇到问题。

当前代码： 我有以下导航结构：

App.js

export default function App() {
    return (
        <AuthProvider>
            <NavigationContainer>
              <Routes />
            </NavigationContainer>
        </AuthProvider>
    );
}

Routes.js

const Stack = createNativeStackNavigator();

const Routes = () => {
    const { user, initializing } = useContext(AuthContext);

if (initializing) {
    // Show a loading spinner or splash screen
    return null; 
    }

console.log(user ? 'Rendering SignedInStack' : 'Rendering SignedOutStack');

return (
     <Stack.Navigator>
         {user ? (
     <Stack.Screen name="SignedIn" component={SignedInStack} options={{ headerShown: false }}/>
      ) : (
     <Stack.Screen name="SignedOut" component={SignedOutStack} options={{ headerShown: false }} />
    )}
    </Stack.Navigator>
    );
};

export default Routes;

这是我的登录屏幕中定义导航的功能

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
        if (user) {
            console.log('User is authenticated, navigating to Tabs');
            navigation.replace('SignedIn', { screen: 'Tabs' });
        }
    });

        return unsubscribe; // Cleanup subscription on unmount
    }, [navigation]);

请注意，“选项卡”是带有选项卡导航器的屏幕，其中 {HomeScreen} 是选项卡导航器中的屏幕之一

我尝试调试相关的不同屏幕，但似乎没有任何变化。我不断收到 navigation.replace() 错误。

Answer 1

navigation.replace() 不将当前屏幕作为参数。当您导航到非嵌套屏幕时，只需将字符串作为字符串传递，例如 导航.替换（“选项卡”）。 但是，当您导航到嵌套屏幕时，您将父级作为第一个参数传递，并将导航到的屏幕作为第二个参数传递。例如 navigation.replace("选项卡", { screen: "主页" }) 如果 Home 是 Tabs 上的默认屏幕，您只需传入 Tabs 即可正常工作，无需第二个参数。