在状态更改时重新渲染 AppNavigator

Question

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

我的 app.tsx 文件中有一个正在呈现的 AppNavigator。

  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 文档有一个名为 onAuthStateChanged 的 setUser 操作。我正在使用电子邮件和密码登录并注册。我已经记录了他们按预期工作的身份验证状态更改。

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

setUser 操作在 try catch

中设置状态 isAuthenticated

  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 以便当可观察数据发生变化时它会 re-render。

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

Answer 2

尝试将 AppNavigator 组件放入观察者中？

在状态更改时重新渲染 AppNavigator

Rerender AppNavigator on state change

reactjs

react-native

react-navigation

mobx-state-tree