导航实验用动画替换场景答案

【问题标题】：NavigationExperimental replace scene with animation导航实验用动画替换场景
【发布时间】：2016-09-16 21:33:30
【问题描述】：

用newone替换堆栈中最后一个场景的方法？就像新场景与动画一起推送，而旧场景在推送动画结束时从堆栈中默默弹出。 NavigationExperimental StateUtils replaceAt 和 replaceAtIndex 只改变顶部的场景，没有动画。

【问题讨论】：

你用的是什么渲染器？是在使用导航卡堆栈还是导航过渡器？
我使用默认卡组。

标签： animation navigation react-native stack

【解决方案1】：

NavigationStateUtils 中没有实用功能可以为您执行此操作，但您需要做的是 push，然后在导航过渡动画的最后您执行 reset，其中包含除最新路线之前的路线。

由于您使用的是NavigationCardStack，因此您必须在使用InteractionManager 推送的组件上执行reset，因为NavigationCardStack does not have a callback prop to call when the transition is finished。

这是一个例子：

// Navigation reducer
function routeReducer(
  navigationState = {
    routes: [],
    index: 0,
  },
  action,
) {
  switch (action.type) {
    case 'replaceWithPushAnimation':
      // Pass a `reset` flag to your component so it knows to `resetWithoutRoute`
      return NavigationStateUtils.push(navigationState, action.route);
    case 'resetWithoutRoute':
      return NavigationStateUtils.reset(
        navigationState,
        [
          // Copy of all the routes except for navigationState.routes[length - 2]
        ]);
    default:
      return navigationState;
  }
}

// The component that you pushed
class PushedComponent extends React.Component {
  componentDidMount() {
    if (this.props.shouldResetWithoutPrevious) {
      // This runs after the navigation transition is over
      InteractionManager.runAfterInteractions(() => {
        // This function calls the reducer to trigger the
        // routes reset
        this.props.onNavigate({
          type: 'resetWithoutRoute',
        });
      });
    }
  }
  // render() {}
}

如果你不喜欢这种方法，你可以使用NavigationTransitioner，其中has a onTransitionEnd callback prop 做reset，但是，因为它是一个较低级别的API，你必须自己实现导航转换。

【讨论】：

在代码 this.props.shouldResetWithoutPrevious 中，您在哪里将此值设为 true，也显示该时间@rclai