因此,我刚刚将一个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-react
vsmobx-react-lite
或两者后,我想起了我经历的上次升级期间遇到的问题,该问题在这两个之间切换,以及使用inject
和observer
。
所以我意识到也许我的导航器需要观察...
mobx-react-lite
在下面导入和包装RootStack可以为我解决所有问题。
const RootStack = observer(() => {
希望这可以帮助减轻别人的头痛。
总而言之,我react-native
对Hooks和的所有这些最新更改FunctionalComponents
以及对关联库和最终我的代码库所做的一切感到满意,但令人讨厌的是,它需要不断学习新的API并重新建立我的项目,这很累人甚至还没完成!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句