React Navigation 5 身份验证流程与 MST，而不是“切换”

Question

因此，我刚刚将ignite-bowser项目升级到他们的5.0 模板，其中包括 React Navigation 5，这需要从使用SwitchNavigator在“Auth”和“App”StackNavigators 之间交换的传统推荐方法更改为新的声明式身份验证流程方法使 SwitchNavigator 变得冗余。

仅供参考，Ignite Bowser 项目本质上是 React Native 模板应用程序，由

React Native
React Navigation
MobX State Tree
TypeScript
Reactotron
And more!

true因此，这一切看起来都很简单，但是当使用存储在应用程序商店之一中的布尔值并设置为在身份验证方法中调用的操作中时，我无法让实际的导航器进行切换。

根据服务器日志和 Reactotron 源，身份验证工作正常。之后重新加载应用程序确实会呈现应用程序导航器，但会话实际上并不有效，因为内存已被清除。所有后续请求都会失败，但应用程序不会切换到身份验证导航器。

以下是相关代码片段：

根导航器.tsx

const RootStack = () => {
  const { pbidStore } = useStores()

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        stackPresentation: "modal",
      }}
    >
      {pbidStore.isAuthenticated ? (
        <Stack.Screen
          name="pbidStack"
          component={PbidNavigator}
          options={{
            headerShown: false,
          }}
        />
      ) : (
        <Stack.Screen
          name="authStack"
          component={AuthNavigator}
          options={{
            headerShown: false,
          }}
        />
      )}

    </Stack.Navigator>

/**
 * PbidStore Model
 */
 export const PbidStoreModel = types.model("PbidStore").props({
   ....

   isAuthenticated: types.optional(types.boolean, false),
 })
 .actions(self => ({
   setStatus(value?:  "idle" | "pending" | "done" | "error") {
     self.status = value
   },
   setAuthToken(token: string) {
     self.environment.pbidApi.setAuthToken(token)
   },
   setAuthenticated(value: boolean) {
     self.isAuthenticated = value
   },
   ...
 }))
 .actions(self => ({
   authenticate: flow(function*(email: string, password: string, remember: boolean) {
     self.setStatus("pending")
     try {
       const result = yield self.environment.pbidApi.authenticate(email, password)
       if (result.kind === "ok") {
         self.setAuthToken(result.token)
         self.setStatus("done")
         self.setAuthenticated(true)
         self.loadUser()
         if(remember)
           yield self.storeCredentials(email, password)
       } else {
         self.setStatus("error")
         self.setAuthenticated(false)
       }
     } catch {
       self.setStatus("error")
       self.setAuthenticated(false)
     }
   }),
...

Answer 1

在我写出这个问题，并开始选择 SO 标签，并且必须决定使用mobx-reactvsmobx-react-lite或两者时，我记得我在上次升级期间遇到的问题，在这两者之间切换，以及使用inject和observer。

所以我意识到也许我的导航器需要可观察......

mobx-react-lite在下面导入和包装 RootStack 为我解决了所有问题。

const RootStack = observer(() => {

希望这有助于减轻其他人的头痛。

总而言之，我对react-nativeHooks 和的所有这些最近的更改FunctionalComponents以及它对相关库以及最终我的代码库所做的事情感到满意，但是不得不不断学习新的 API 并重新建立我的项目是很累吗在它们完成之前！