Fork NavigationAnimatedView to NavigationTransitioner

Summary:
- Fork NavigationAnimatedView to NavigationTransitioner
- NavigationAnimatedView will soon be deprecated and we'd ask people to use NavigationTransitioner instead.

Difference between  NavigationTransitioner and NavigationAnimatedView

- prop `applyAnimation` is removed.
- new prop `configureTransition`, `onTransitionStart`, and `onTransitionEnd` are added.

tl;dr;

In NavigationAnimatedView, we `position` (an Animated.Value object) as a proxy of the
transtion which happens whenever the index of navigation state changes.

Because `position` does not change unless navigation index changes, it won't
be possible to build animations for actions that changes the  navigation state
without changing the index.

Also, we believe that the name `Transitioner` is a better name for this core component
that focuses on transitioning. Note that the actual animation work is done via
`<Animated.View />` returnd from the `renderScene` prop.

Reviewed By: ericvicenti

Differential Revision: D3302688

fbshipit-source-id: 720c3a4d3ccf97eb05b038baa44c9e780aad120b
This commit is contained in:
Hedger Wang
2016-05-18 13:32:52 -07:00
committed by Facebook Github Bot 7
parent 0e997c6eab
commit 7db7f78dc7
6 changed files with 304 additions and 5 deletions

View File

@@ -41,8 +41,6 @@ export type NavigationLayout = {
width: NavigationAnimatedValue,
};
export type NavigationPosition = NavigationAnimatedValue;
export type NavigationScene = {
index: number,
isStale: boolean,
@@ -61,7 +59,14 @@ export type NavigationSceneRendererProps = {
onNavigate: NavigationActionCaller,
// The progressive index of the containing view's navigation state.
position: NavigationPosition,
position: NavigationAnimatedValue,
// The value that represents the progress of the transition when navigation
// state changes from one to another. Its numberic value will range from 0
// to 1.
// progress.__getAnimatedValue() < 1 : transtion is happening.
// progress.__getAnimatedValue() == 1 : transtion completes.
progress: NavigationAnimatedValue,
// The scene to render.
scene: NavigationScene,
@@ -85,6 +90,12 @@ export type NavigationPanPanHandlers = {
onStartShouldSetResponderCapture: Function,
};
export type NavigationTransitionSpec = {
duration?: number,
// An easing function from `Easing`.
easing?: () => any,
};
// Functions.
export type NavigationActionCaller = Function;
@@ -112,3 +123,5 @@ export type NavigationSceneRenderer = (
export type NavigationStyleInterpolator = (
props: NavigationSceneRendererProps,
) => Object;
export type NavigationTransitionConfigurator = () => NavigationTransitionSpec;