react-native - 如何导航到不是 subview 的不同 View ？

Question

我是 iOS 新手和 iOS 新手(不是编程)，所以如果这个问题很简单，请原谅。我正在尝试从一个 View 导航到另一个 View (带有过渡)，但是它们不相关，因此我不需要向后导航。我实际上根本没有导航栏。使用 Navigator 组件时，它似乎根本不支持这一点。我不确定是否有单独的方法来执行此操作，但如果不实现我自己的 hack，我无法弄清楚。

如果我使用导航器组件并继续插入 View ，那么它只会将它们全部保存在内存中，我不希望这样。我可以从一个 View 过渡到另一个 View 然后弹出，但在这种情况下我可能最终会转到错误的 View 。我也可以替换 View ，但似乎不允许转换。

给你一个这样的场景:

1. 应用程序启动并加载“正在加载”屏幕。
2. 初始加载完成后，它将转到“登录”屏幕。
3. “登录”屏幕上有一个用于“注册”或“找回密码”的按钮。
4. 如果他们点击“注册”，系统会将他们带到那里并返回“登录”按钮。
5. 如果他们点击“找回密码”，他们将转到一个页面，其中包含返回“登录”或“注册”的按钮。

因此，通过这个示例，您可以看到无法弹出，因为如果您在登录屏幕上转到注册屏幕，然后想转到检索密码屏幕，那么弹出根本行不通。我不希望屏幕上有任何导航控件，我只想能够在这些屏幕之间进行平滑过渡。

现在我能够找到一种方法来做到这一点，但我必须向 Navigator 类添加一个方法，并使用其中一些核心方法破解代码，这似乎根本不是一个好主意，但这是代码(请注意，这实际上只是一种尝试，看看它是否可行):

Navigator.prototype.pushWithUnmount = function(route) {
    var activeLength = this.state.presentedIndex + 1;
    var activeStack = this.state.routeStack.slice(0, activeLength);
    var activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
    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,
            null, // default velocity
            null, // no spring jumping
            () => {

                this.replaceAtIndex(nextStack[destIndex], 0);
                this.setState({
                    presentedIndex: 0,
                });
            }
        );
    });
}

通过使用上面提供的代码，我现在可以做到:

this.props.navigator.pushWithUnmount({ component: SomeComponent });

使用这段代码， View 通过转换被插入堆栈，旧 View 在完成时被卸载。

请告诉我我做错了什么，还有更好的方法吗？

Answer 1

React Native 的默认路由器非常有限。我会查看 React Native Router Flux .我们几周前刚刚在我们的产品中切换到它并且非常喜欢它。它完全符合您的要求。