时间戳

首页 > 解决方案 > 使用 MST 的 React Navigation 5 身份验证流程，而不是“切换”

javascript - 使用 MST 的 React Navigation 5 身份验证流程，而不是“切换”

问题描述

所以，我刚刚将一个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 提要，身份验证工作正常。之后重新加载应用程序会呈现应用程序导航器，但会话实际上无效，因为内存已被清除。所有后续请求均失败，但应用程序不会切换到 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)
     }
   }),
...

标签： javascriptreactjsreact-nativereact-navigationmobx-react-lite

解决方案

在我写出这个问题并开始选择 SO 标签并不得不决定使用mobx-reactvsmobx-react-lite或两者之后，我想起了我在上次升级期间遇到的问题，在这两者之间切换，以及使用injectand observer.

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

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

const RootStack = observer(() => {

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

总而言之，我很高兴react-nativeHooks 和 . 的所有这些最近发生的变化FunctionalComponents，以及它对关联库和最终我的代码库所做的事情，但是哇，不得不不断学习新的 API 和重新构建我的项目很累在他们完成之前！

推荐阅读