时间戳

首页 > 解决方案 > 在设置 redux 状态后呈现经过身份验证和未经身份验证的条件堆栈导航器

react-native - 在设置 redux 状态后呈现经过身份验证和未经身份验证的条件堆栈导航器

问题描述

我正在尝试根据“isAuthenticated”状态还原值有条件地呈现经过身份验证和未经身份验证的屏幕（试图完全按照此链接中提到的方式实现：

https://reactnavigation.org/docs/auth-flow/?fbclid=IwAR3Wj664kuFR32LJ4CjCkofyv3L1cjDRIc-JFbNICddY6JLqgX-wdGiG8Ls

我的应用程序的当前流程是：

  1. 用户看到未经身份验证的链接（注册页面），
  2. 一旦用户注册“isAuthenticated”，redux 状态值就会从 false 更改为 true，并且使用 AsyncStorage 在本地保存令牌
  3. 每次关闭并重新打开应用程序时，都会使用操作来读取本地数据，并将 isAuthenticated 设置为 true。

问题：

每次打开应用程序时，都会显示未经过身份验证的屏幕，然后显示经过身份验证的屏幕。

期望的结果：

根据 isAuthenticated 布尔值，应显示经过身份验证的屏幕或未经过身份验证的屏幕。

确定问题的原因：

由于“isAuthenticated”默认值设置为 false，每次应用程序启动时，isAuthenticated 将在瞬间为 false，未通过身份验证的屏幕将显示几秒钟。

在同一时间，读取本地 AsyncStorage 数据并将 redux 状态值更改为 true，这导致另一个重新渲染并显示经过身份验证的屏幕。

由于 isAuthenticated 在重新打开应用程序期间具有 false 和 true 值，因此将不胜感激任何解决此问题的建议。

标签： react-nativereduxexporeact-navigationasyncstorage

解决方案

由于“isAuthenticated”默认值设置为 false，每次应用程序启动时，isAuthenticated 将在瞬间为 false，未通过身份验证的屏幕将显示几秒钟。

问题是这不能用true和表示false，因为实际上有 3 个状态：

  1. 检查
  2. 检查，登录
  3. 已检查，未登录

最简单的方法是添加另一个状态属性“checkingAuthentication”或您喜欢的任何内容，并显示启动屏幕，直到您完成检查。文档中的示例使用isLoading状态执行此操作。

推荐阅读