导航实验替换场景动画

Question

它的方式来取代堆栈中的最后一个场景与newone？像新的场景被动画推动，并且当推动动画结束时，更老的是从堆栈静静地拖动。 NavigationExperimental StateUtils replaceAt和replaceAtIndex仅在没有动画的情况下更改顶部的场景。

Answer 1

有一个在NavigationStateUtils没有效用函数，这是否对你，但你必须做的是push，然后在导航过渡动画的最后你做一个reset所有的路线，除了最新的一个前路由。

由于您使用NavigationCardStack，你所要做的组件上的reset您使用InteractionManager因为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，你必须实现导航会自行转换。