React 导航结构

Question

反应开发人员您好，我对反应导航结构有疑问，当我们嵌套导航器时会发生这种情况，在反应导航文档中说最好减少嵌套导航器的数量，所以我想展示一个示例需要在所有导航路线中渲染一个产品屏幕的电子商务应用程序。

“选项卡导航器的初始路线是第一个堆栈导航器，并且它具有初始路线主屏幕”

因此，正如您在此图中所看到的，选项卡抽屉和堆栈导航器组合在一起，在我看来，这是最低效的方法，我认为是为选项卡导航器创建两个堆栈导航器，在这个堆栈中，我们正在复制一个产品屏幕。

“我们需要在主屏幕和产品部分推送一个产品屏幕，这就是为什么我们将产品屏幕放在堆栈导航器中，否则会抛出错误”

现在，可以进行反应记忆或纯组件，但我们仍然创建两个堆栈导航器。现在，这是我在一些博客中看到人们进行导航的方式，但我认为有更好的方法来做到这一点。

这是我认为最有效的方法，我们删除选项卡的堆栈导航器，只放置要渲染的屏幕，然后在抽屉中添加一个堆栈导航器，其中包含我们需要推送的屏幕。

现在我的问题是，是否可以将一个产品屏幕推送到主屏幕上，是否也需要在搜索屏幕上推送？制作这样的东西的最佳结构是什么“通过这样的东西，我的意思是在所有屏幕中使用一个产品屏幕来推送和显示给用户”，并且不会因放置大量内容而出现性能问题嵌套导航器，我想避免不必要的屏幕和组件重新渲染？

第一种情况好还是第二种情况好？

Answer 1

在我看来，情况 2 更好，因为您没有不必要地重复屏幕。

在考虑要定义的 React Navigation 结构之前，绘制应用程序的表面级页面以获得整个应用程序中导航系统的全局视图可能会很有用。

例如：

这张地图立即提供了对许多可能的可用性弱点的根源的宝贵见解。

此外，它还明确了屏幕之间的所有关系以及它们之间可能的用户流（您必须从哪个屏幕导航到/导航到哪个屏幕）。

之后，考虑到屏幕的独特性，可以提出React导航结构。这样，在嵌套堆栈/抽屉/选项卡之间导航就成为一项简单的编码工作，而不是架构工作。