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!

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

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

以下是相关的代码段：

root-navigator.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(() => {

希望这可以帮助其他人免于头痛。

总而言之，我对使用Hooks和react-native对FunctionalComponents所做的所有这些最新更改以及对关联库以及最终我的代码库所做的一切感到高兴，但是厌倦了必须不断学习新API并在项目完成之前重新建立项目的基础！

使用MST反应导航5身份验证流程，而不是“切换”

1 个答案: