Question

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

我已经阅读了很多关于Navigator和反应原生导航的内容。实现像这样的堆叠导航非常简单：

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被摧毁了。

我已经阅读了围绕“嵌套导航器实现树状导航”的讨论，但即使我在主视图周围放置导航器，并且每个场景都有正确的导航器（用{{引用主导航器） 1}} prop）。根导航器仍然存在同样的问题。

如果我的焦点视图不是最后一个而没有破坏所有视图后，如何在导航器路径堆栈中添加新视图？

Answer 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到新讨论4的jupimg问题，而没有卸载Discussion2和Discussion3。

要从讨论视图中解决打开配置文件/设置/ ...页面，我已经将每个讨论包装在一个组件中，其中是initialRoute，只是简单地推送/ poped。

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

1 个答案: