Question

我正在进行导航，堆栈中只有一条路线。

所以我使用replace（）而不是pop（）和push（）。但我注意到的问题是，在使用replace（）时，没有可用的过渡动画，例如我用pop（）和push（）看到的动画。

有没有办法解决这个问题？或者是否有其他方法来实现导航，其中一个视图替换现有视图（当然还有过渡动画）？

Answer 1

我遇到了同样的问题，并设法找到了zhaotai提供的解决方案here。

要解决此问题，请在导入Navigator组件的js文件中定义以下新方法。

Navigator.prototype.replaceWithAnimation = function (route) {
  const activeLength = this.state.presentedIndex + 1;
  const activeStack = this.state.routeStack.slice(0, activeLength);
  const activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
  const nextStack = activeStack.concat([route]);
  const destIndex = nextStack.length - 1;
  const nextSceneConfig = this.props.configureScene(route, nextStack);
  const nextAnimationConfigStack = activeAnimationConfigStack.concat([nextSceneConfig]);

  const replacedStack = activeStack.slice(0, activeLength - 1).concat([route]);
  this._emitWillFocus(nextStack[destIndex]);
  this.setState({
    routeStack: nextStack,
    sceneConfigStack: nextAnimationConfigStack,
  }, () => {
    this._enableScene(destIndex);
    this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity, null, () => {
      this.immediatelyResetRouteStack(replacedStack);
    });
  });
};

然后，您可以改为呼叫navigator.replaceWithAnimation(route)。

为navigator.replace（）做出原生过渡动画的反应

1 个答案: