導航實驗替換場景動畫

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，你必須實現導航會自行轉換。