状态更改时重新渲染 AppNavigator

Question

我正在尝试根据isAuthenticated状态渲染某些导航堆栈。我遇到的问题是AppNavigator仅在第一次渲染时渲染，而不进行任何其他更改，我不确定为什么。我尝试在AppNavigator组件中使用 useEffect 来设置辅助本地状态，isAuthenticated但没有执行回调。我把所有相关的内容都放在下面了。我很感激任何建议。

AppNavigator我的文件中正在渲染一个app.tsx。

  return (
    <ToggleStorybook>
      <ApolloProvider client={client}>
        <RootStoreProvider value={rootStore}>
          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
            <ErrorBoundary catchErrors={"always"}>
              <AppNavigator
                initialState={initialNavigationState}
                onStateChange={onNavigationStateChange}
              />
            </ErrorBoundary>
          </SafeAreaProvider>
        </RootStoreProvider>
      </ApolloProvider>
    </ToggleStorybook>
  )

正在AppNavigator回归

export const AppNavigator = (props: NavigationProps) => {
  const { isAuthenticated } = useStores()
  const colorScheme = useColorScheme()
  useBackButtonHandler(canExit)

  return (
    <NavigationContainer
      ref={navigationRef}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
      {...props}
    >
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        {isAuthenticated ? (
          <Stack.Screen name="main" component={MainTabs} />
        ) : (
          <Stack.Screen name="signup" component={SignUpStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

我使用 mob-state-x-tree 进行状态管理，并有一个根据 firebase Auth 文档setUser调用的操作。onAuthStateChanged我正在使用电子邮件和密码登录并注册。我已经记录了他们正在按预期工作的身份验证状态更改。

  function onAuthStateChanged(user: any) {
    if (user) {
      if (rootStore) {
        rootStore.setUser(user)
        console.log("we have passed user to root store")
      }
    }

该setUser操作将状态设置isAuthenticated为try catch

  setUser: flow(function* (firebaseUser) {
    try {
      const idToken = yield firebaseUser.getIdToken()
      yield AsyncStorage.setItem(
        '@lessns:token',
        idToken
      );
      self.isAuthenticated = true
      self.user = {id: firebaseUser.uid}
    } catch(err) {
      console.log(err, 'this is the first time ')
      self.isAuthenticated = false
    }
  }),

Answer 1

您需要将您的AppNavigator组件制作为 ，observer以便当可观察数据依赖于更改时它会重新渲染。

export const AppNavigator = observer((props: NavigationProps) => {
  // ...
})