React Native 导航：状态更改后 Stack.Navigator 未更新

Question

我在 React Native 应用程序中遇到导航问题。这是我的 RootNavigator 组件的相关部分：

const Stack = createStackNavigator();

export function RootNavigator() {
  const isAuthenticated = useAppStore(state => state.isAuthenticated);

  return (
    <Stack.Navigator
      initialRouteName={isAuthenticated ? 'home' : 'onBoard'}>
      {!isAuthenticated ? (
        <Stack.Screen
          name="onBoard"
          component={OnBoard}
          options={{ headerShown: false }}
        />
      ) : (
        <Stack.Screen
          name="home"
          component={Home}
          options={{ headerShown: false }}
        />
      )}
    </Stack.Navigator>
  );
}

当用户成功登录时，我更新 isAuthenticated 状态并导航到主屏幕，如下所示：

setIsAuthenticated(true);
navigation.navigate('home');

但是，即使 isAuthenticated 状态更改为 true，Stack.Navigator 内的数据似乎也没有更新，并且导航到主屏幕失败，并出现错误，指出找不到主屏幕。

有趣的是，如果我登录后重新启动应用程序，它会正确导航到主屏幕。这表明导航结构是正确的，但堆栈没有动态更新。

有人可以帮助我理解为什么 Stack.Navigator 没有正确更新以及如何解决这个问题吗？

这里我希望它在 setIsAuthenticated(true) 时进入主屏幕；完成了。

Answer 1

我创建了一个示例：

import * as React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

export default function App() {
  const [isSignedIn, setIsSignedIn] = React.useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isSignedIn ? (
          <>
            <Stack.Screen
              name="Home"
              component={() => <HomeScreen setIsSignedIn={setIsSignedIn} />}
            />
            <Stack.Screen name="Profile" component={ProfileScreen} />
            <Stack.Screen name="Settings" component={SettingsScreen} />
          </>
        ) : (
          <>
            <Stack.Screen
              name="SignIn"
              component={() => <SignInScreen setIsSignedIn={setIsSignedIn} />}
            />
            <Stack.Screen name="SignUp" component={SignUpScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomeScreen(props) {
  const nav = useNavigation();
  return (
    <View>
      <Button title="SignOut" onPress={() => props.setIsSignedIn(false)} />
      <Button title="Go To" onPress={() => nav.navigate('Profile')} />
    </View>
  );
}

function ProfileScreen() {
  return <View />;
}

function SettingsScreen() {
  return <View />;
}

function SignInScreen(props) {
  return (
    <View>
      <Button title="SignIn" onPress={() => props.setIsSignedIn(true)} />
    </View>
  );
}

function SignUpScreen() {
  return <View />;
}

这就是你想要的吗？