mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-30 17:33:21 +08:00
7db7f78dc7
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
127 lines
3.4 KiB
JavaScript
127 lines
3.4 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule NavigationPropTypes
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
import type {
|
|
NavigationSceneRendererProps,
|
|
} from 'NavigationTypeDefinition';
|
|
|
|
/**
|
|
* React component PropTypes Definitions. Consider using this as a supplementary
|
|
* measure with `NavigationTypeDefinition`. This helps to capture the propType
|
|
* error at run-time, where as `NavigationTypeDefinition` capture the flow
|
|
* type check errors at build time.
|
|
*/
|
|
|
|
const Animated = require('Animated');
|
|
const React = require('React');
|
|
|
|
const {PropTypes} = React;
|
|
|
|
/* NavigationAction */
|
|
const action = PropTypes.shape({
|
|
type: PropTypes.string.isRequired,
|
|
});
|
|
|
|
/* NavigationAnimatedValue */
|
|
const animatedValue = PropTypes.instanceOf(Animated.Value);
|
|
|
|
/* NavigationState */
|
|
const navigationState = PropTypes.shape({
|
|
key: PropTypes.string.isRequired,
|
|
});
|
|
|
|
/* NavigationParentState */
|
|
const navigationParentState = PropTypes.shape({
|
|
index: PropTypes.number.isRequired,
|
|
key: PropTypes.string.isRequired,
|
|
children: PropTypes.arrayOf(navigationState),
|
|
});
|
|
|
|
/* NavigationLayout */
|
|
const layout = PropTypes.shape({
|
|
height: animatedValue,
|
|
initHeight: PropTypes.number.isRequired,
|
|
initWidth: PropTypes.number.isRequired,
|
|
isMeasured: PropTypes.bool.isRequired,
|
|
width: animatedValue,
|
|
});
|
|
|
|
/* NavigationScene */
|
|
const scene = PropTypes.shape({
|
|
index: PropTypes.number.isRequired,
|
|
isStale: PropTypes.bool.isRequired,
|
|
key: PropTypes.string.isRequired,
|
|
navigationState,
|
|
});
|
|
|
|
/* NavigationSceneRendererProps */
|
|
const SceneRendererProps = {
|
|
layout: layout.isRequired,
|
|
navigationState: navigationParentState.isRequired,
|
|
onNavigate: PropTypes.func.isRequired,
|
|
position: animatedValue.isRequired,
|
|
progress: animatedValue.isRequired,
|
|
scene: scene.isRequired,
|
|
scenes: PropTypes.arrayOf(scene).isRequired,
|
|
};
|
|
|
|
const SceneRenderer = PropTypes.shape(SceneRendererProps);
|
|
|
|
/* NavigationPanPanHandlers */
|
|
const panHandlers = PropTypes.shape({
|
|
onMoveShouldSetResponder: PropTypes.func.isRequired,
|
|
onMoveShouldSetResponderCapture: PropTypes.func.isRequired,
|
|
onResponderEnd: PropTypes.func.isRequired,
|
|
onResponderGrant: PropTypes.func.isRequired,
|
|
onResponderMove: PropTypes.func.isRequired,
|
|
onResponderReject: PropTypes.func.isRequired,
|
|
onResponderRelease: PropTypes.func.isRequired,
|
|
onResponderStart: PropTypes.func.isRequired,
|
|
onResponderTerminate: PropTypes.func.isRequired,
|
|
onResponderTerminationRequest: PropTypes.func.isRequired,
|
|
onStartShouldSetResponder: PropTypes.func.isRequired,
|
|
onStartShouldSetResponderCapture: PropTypes.func.isRequired,
|
|
});
|
|
|
|
/**
|
|
* Helper function that extracts the props needed for scene renderer.
|
|
*/
|
|
function extractSceneRendererProps(
|
|
props: NavigationSceneRendererProps,
|
|
): NavigationSceneRendererProps {
|
|
return {
|
|
layout: props.layout,
|
|
navigationState: props.navigationState,
|
|
onNavigate: props.onNavigate,
|
|
position: props.position,
|
|
progress: props.progress,
|
|
scene: props.scene,
|
|
scenes: props.scenes,
|
|
};
|
|
}
|
|
|
|
module.exports = {
|
|
// helpers
|
|
extractSceneRendererProps,
|
|
|
|
// Bundled propTypes.
|
|
SceneRendererProps,
|
|
|
|
// propTypes
|
|
action,
|
|
navigationParentState,
|
|
navigationState,
|
|
panHandlers,
|
|
SceneRenderer,
|
|
};
|