使用MST反应导航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!

因此,这一切似乎都足够简单,但是当使用存储在App Store之一中的布尔值并设置为true身份验证方法中调用的操作时,我无法获得实际的导航器进行切换

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

以下是相关的代码段:

根导航器

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)
     }
   }),
...
招数

在我写完这个问题并开始选择SO标签并决定使用mobx-reactvsmobx-react-lite或两者后,我想起了我经历的上次升级期间遇到的问题,该问题在这两个之间切换,以及使用injectobserver

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

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

const RootStack = observer(() => {

希望这可以帮助减轻别人的头痛。

总而言之,我react-native对Hooks和的所有这些最新更改FunctionalComponents以及对关联库和最终我的代码库所做的一切感到满意,但令人讨厌的是,它需要不断学习新的API并重新建立我的项目,这很累人甚至还没完成!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 MFP 8.0 对用户进行身份验证后无法在单选按钮之间切换

来自分类Dev

根据身份验证状态切换 Google Analytics ID?

来自分类Dev

使用导航抽屉切换活动?

来自分类Dev

导航抽屉切换活动而不是片段

来自分类Dev

MVC4:从窗体身份验证切换到窗口身份验证

来自分类Dev

身份验证失败切换到问候

来自分类Dev

身份验证失败切换到问候

来自分类Dev

使用Accounts.framework的Facebook最佳身份验证流程

来自分类Dev

反应切换ID

来自分类Dev

jQuery导航切换

来自分类Dev

使导航栏切换的菜单切换为垂直而不是水平

来自分类Dev

反应切换类,使用模块导入

来自分类Dev

反应如何切换在多个部分中使用的按钮?

来自分类Dev

如何使用lambda作为“开发者身份验证身份”来提供自定义身份验证流程?

来自分类Dev

Spring Security-在运行时在身份验证提供程序之间切换(本地数据库或远程LDAP)

来自分类Dev

使用默认的Android Studio导航抽屉切换Fragment

来自分类Dev

使用按钮切换引导导航栏

来自分类Dev

使用onNavigationItemSelected()在导航抽屉中切换片段

来自分类Dev

如何使用纯CSS创建移动导航切换?

来自分类Dev

我如何使用jQuery切换实现此导航

来自分类Dev

如何使用导航栏切换右侧的登录按钮

来自分类Dev

使用导航栏在页面之间切换是“跳跃的”

来自分类Dev

如何使用纯CSS创建移动导航切换?

来自分类Dev

使用两个类切换导航

来自分类Dev

Angular 2中的身份验证流程

来自分类Dev

什么是好的登录身份验证流程

来自分类Dev

Tomcat使用BASIC身份验证而不是FORM身份验证

来自分类Dev

是否可以使用设备身份验证而不是创建自己的身份验证程序?

来自分类Dev

使用标志而不是链接进行语言切换?

Related 相关文章

  1. 1

    使用 MFP 8.0 对用户进行身份验证后无法在单选按钮之间切换

  2. 2

    根据身份验证状态切换 Google Analytics ID?

  3. 3

    使用导航抽屉切换活动?

  4. 4

    导航抽屉切换活动而不是片段

  5. 5

    MVC4:从窗体身份验证切换到窗口身份验证

  6. 6

    身份验证失败切换到问候

  7. 7

    身份验证失败切换到问候

  8. 8

    使用Accounts.framework的Facebook最佳身份验证流程

  9. 9

    反应切换ID

  10. 10

    jQuery导航切换

  11. 11

    使导航栏切换的菜单切换为垂直而不是水平

  12. 12

    反应切换类,使用模块导入

  13. 13

    反应如何切换在多个部分中使用的按钮?

  14. 14

    如何使用lambda作为“开发者身份验证身份”来提供自定义身份验证流程?

  15. 15

    Spring Security-在运行时在身份验证提供程序之间切换(本地数据库或远程LDAP)

  16. 16

    使用默认的Android Studio导航抽屉切换Fragment

  17. 17

    使用按钮切换引导导航栏

  18. 18

    使用onNavigationItemSelected()在导航抽屉中切换片段

  19. 19

    如何使用纯CSS创建移动导航切换?

  20. 20

    我如何使用jQuery切换实现此导航

  21. 21

    如何使用导航栏切换右侧的登录按钮

  22. 22

    使用导航栏在页面之间切换是“跳跃的”

  23. 23

    如何使用纯CSS创建移动导航切换?

  24. 24

    使用两个类切换导航

  25. 25

    Angular 2中的身份验证流程

  26. 26

    什么是好的登录身份验证流程

  27. 27

    Tomcat使用BASIC身份验证而不是FORM身份验证

  28. 28

    是否可以使用设备身份验证而不是创建自己的身份验证程序?

  29. 29

    使用标志而不是链接进行语言切换?

热门标签

归档