基于React Native逻辑的导航取决于下一个屏幕数据

n3ipq98p  于 2023-10-22  发布在  React
关注(0)|答案(2)|浏览(92)

我有一个React Native应用程序,在加载工作流程中(登录后),我有几个屏幕要显示或跳过,这取决于从我的后端检索的数据(存储在本地数据库中)。
例如,我有一个屏幕显示用户要接受的法律的文档,但如果用户在新设备上重新安装应用程序,当他进行身份验证时,将从后端检索法律的文档的约定状态,此屏幕可能会跳过.
我的问题是确定在哪里编写与导航相关的逻辑。
典型的工作流程是:
登录=>加载屏幕(直到我们下载了法律的文档)=>法律的文档(如解释的可选)=>其他引导屏幕=>再次加载屏幕(如果从后端检索数据仍在进行中)。
我应该在哪里写navigation.navigate('LegalDocuments')代码行。

  • 如果我写在加载屏幕,我将获取文件(以确定下一个屏幕),然后在法律的文件屏幕,我将再次获取这些文件。
  • 如果我用导航仪把它们取来也是一样的问题。
  • 如果我在法律的文档屏幕的useFocusEffect中获取它们,用户将简要地看到屏幕过渡。

我应该如何/在哪里实现这个导航逻辑?

gab6jxml

gab6jxml1#

你不需要有一个加载屏幕本身,但一个简单的加载组件(如果需要,可以全屏)。
因此,您可以在一个钩子(如useFetchLegalDocuments)中获取文档,然后从登录页面导航到LegalDocuments屏幕,但在获取完成之前,您将显示加载情况。

const LegalDocumentsContainer = () => {
  const { isLoading, legalDocuments } = useFetchLegalDocuments();

  if (isLoading) {
    return <Loading />
  }

  return <LegalDocuments documents={legalDocuments} />
}

当用户到达这个屏幕时,他们将看到一个加载指示器,但是一旦抓取完成,组件将呈现法律的文档。
请记住,这是非常高的水平,我把部分逻辑移到钩子上,这样我就可以专注于这个问题。

bvjveswy

bvjveswy2#

我个人做一个AuthorizedAreaNavigator和一个单独的LoginNavigator
我会把legal calls/onboarding workflow放在登录页面上的登录/授权加载器中。所以当你点击授权区域导航器时,你已经拥有了将用户导航到正确区域所需的所有数据。我认为这是一个比多个加载屏幕更好的用户体验。
为了让所有的数据都可以用于Authorized Area Navigator,我通常使用创建一个React Context Provider,我将其称为UserContext。上下文包含用户的所有状态,更具体地说,是您需要为注册/法律的显示的状态和文件。
https://react.dev/reference/react/createContext
我个人也喜欢把我的逻辑放在一个上下文中,所以我会创建一个函数来执行http调用,以获取上下文中的用户数据,然后在登录屏幕中调用该函数,或者更好地作为授权/登录函数的一部分。这样,我只需要在loginScreen上使用一个方法进行授权/登录,当完成时,我知道我拥有了所有的用户数据,我将需要向前移动,并将用户带到他们需要去的地方。
希望能帮上忙!

相关问题