React Navigation 中的响应式导航器

Question

我一直在使用expo和react-navigation在移动和桌面上进行开发，到目前为止它非常棒！但是，我需要在移动设备和桌面抽屉中显示底部选项卡。我在较小和较大的屏幕上应用不同的导航器时遇到了一些麻烦。我们希望在移动设备中显示选项卡，并在大屏幕中显示侧边栏。移动设备和大屏幕之间的路线结构不同。 例如： 在移动屏幕上：

• 主导航器
  • 选项卡导航器
    • 屏幕A
    • 屏幕B
    • 屏幕C
  • 配置文件堆栈导航器
  • 设置堆栈导航器 在移动设备中，我们只希望 3 个屏幕位于选项卡内，而另一个屏幕不应显示选项卡。 在更大的屏幕上：
• 主导航器
  • 抽屉导航器
    • 堆栈A
      • 屏幕A
      • 配置文件堆栈导航器（将堆栈放在这里，因为我们不希望配置文件堆栈导航器显示在抽屉项目列表中）
    • 堆栈B
      • 屏幕B
      • 设置堆栈导航器
    • 堆栈C
      • 屏幕C 请注意，在较大的屏幕中，我们希望每个屏幕都位于抽屉导航器内（因为侧边栏将是持久的）

我们可以做的第一件事是进行条件渲染（基于尺寸），但是出现了几个问题：

1. 我们如何在屏幕上输入这个？
2. 结构不同，我们该如何导航？ （路径也会不同吧？）

我正在考虑创建某种导航包装器，它将接收导航和当前屏幕作为参数。但对此并不确定。如果大家有什么想法或经历过，请分享！预先感谢！

Answer 1

我在他们的 github 上问了一个非常类似的问题，答案是创建一个自定义导航器。

目前还没有办法实现这一点，主要贡献者是这样说的：

堆栈导航器并不是为处理不同的布局而构建的。