javascript - 使用 MST 的 React Navigation 5 身份验证流程，而不是 "switching"

Question

所以，我刚刚升级了 ignite-bowser项目到他们的5.0 template ，其中包括 React Navigation 5，它需要更改使用 SwitchNavigator 的传统推荐方法在 'Auth' 和 'App' StackNavigators 之间交换，到新的 declarative auth flow approach这使得 SwitchNavigator 变得多余。

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

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

所以这一切看起来很简单，但是当使用存储在其中一个应用商店中的 bool 值并设置为 true 时，我无法让实际的导航器进行切换。在身份验证方法中调用的操作中。

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

以下是相关的代码片段:

根导航器.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-react对比 mobx-react-lite或两者兼而有之，我记得我在上次升级期间遇到的问题，在这两者之间切换，以及使用 inject和 observer .

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

进口 mobx-react-lite并将 RootStack 包装在下面为我修复了所有问题。

const RootStack = observer(() => {

希望这有助于避免其他人的头痛。

总而言之，我对 react-native 的所有这些最新变化感到满意。带有 Hook 和 FunctionalComponents ，以及它对关联库和最终我的代码库所做的事情，但是哇，不得不不断学习新的 API 并在我的项目完成之前重新构建我的项目是不是很累!