react-native Navigator 和非堆叠导航（如树）

Posted 2023-02-23

【中文标题】react-native Navigator 和非堆叠导航（如树）

【英文标题】：react-native Navigator and non-stacked navigation (like tree)

【发布时间】：2016-02-13 14:02:31

【问题描述】：

我想实现一个类似 slack 的应用程序，允许用户参与许多讨论并从一个讨论切换到另一个讨论。可以随时添加新的讨论视图。

总的来说，我已经阅读了很多关于 Navigator 和 react-native navigation 的内容。实现这样的堆叠导航非常简单：

Home
  Step 1
    Step 2
     Step 3...

但是对于更多的分层导航，例如：

Home
  Discussion 1
  Discussion 2
    Profile page
    Settings page
  Discussion 3
  ...

...在这里您可以打开几个Discussion 视图。从一个切换到另一个的能力。并随时添加另一个讨论视图，而无需卸载其他视图。

但如果我对文档 (https://facebook.github.io/react-native/docs/navigator.html) 理解得很好，我们必须添加新路线（=创建新视图）的唯一方法是 .push() 和 .replace()。

.push() 销毁当前视图“之后”的所有视图并添加 新观点 .replace() 销毁当前视图并将视图添加到 相同的位置

所以我的路由栈是：

Home > Discussion 1 (focused) > Discussion 2

如果我想用 .push() 添加一个新的 Discussion 3 视图，我的新堆栈是：

Home > Discussion 1 > Discussion 3 (focused)

Discussion 2 已销毁。

我已经阅读了有关“嵌套导航器以实现树状导航”的讨论文章，但即使我在主视图周围放置了一个导航器并且每个场景都有其适当的导航器（使用 @987654333 引用主要导航器） @道具）。根导航器仍然存在同样的问题。

当我的焦点视图不是最后一个时，如何在 Navigator 路由堆栈中添加新视图而不粉碎所有视图？

【参考方案1】：

作为解决方法，直到找到更好的解决方案，我扩展了 Navigator 并添加了一个新的 .pushToBottom() 方法：

pushToBottom (route) 
  var activeStack = this.state.routeStack;
  var activeAnimationConfigStack = this.state.sceneConfigStack;
  var nextStack = activeStack.concat([route]);
  var destIndex = nextStack.length - 1;
  var nextAnimationConfigStack = activeAnimationConfigStack.concat([
    this.props.configureScene(route),
  ]);
  this._emitWillFocus(nextStack[destIndex]);
  this.setState(
    routeStack: nextStack,
    sceneConfigStack: nextAnimationConfigStack,
  , () => 
    this._enableScene(destIndex);
    this._transitionTo(destIndex);
  );

参见：react-native/Libraries/CustomComponents/Navigator/Navigator.js:891

解决了从 Discussion1 跳转到新 Discussion4 的问题，无需卸载 Discussion2 和 Discussion3。

为了从讨论视图中解决打开的配置文件/设置/...页面，我刚刚将每个讨论都包装在一个组件中，该组件是 initialRoute 并被简单地推送/弹出。