kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-03 07:14:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support animation and gesture for Pager.

Browse Source 
Summary: We need to support animation and gesture for Pager.

Reviewed By: ericvicenti

Differential Revision: D3066596

fb-gh-sync-id: 1c1a3d34b4298b4b0dd158f817057ae22dea72f4
shipit-source-id: 1c1a3d34b4298b4b0dd158f817057ae22dea72f4
This commit is contained in:
Hedger Wang
2016-03-23 12:49:28 -07:00
committed by Facebook Github Bot 9
parent 3c488afb0f
commit 4f8668b110
8 changed files with 424 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
View File

@@ -37,7 +37,7 @@ const NavigationAnimatedView = require('NavigationAnimatedView');
const NavigationCard = require('NavigationCard');
const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
const NavigationContainer = require('NavigationContainer');
const NavigationLinearPanResponder = require('NavigationLinearPanResponder');
const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
const NavigationPropTypes = require('NavigationPropTypes');
const React = require('React');
const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
@@ -46,7 +46,7 @@ const StyleSheet = require('StyleSheet');
const emptyFunction = require('fbjs/lib/emptyFunction');
const {PropTypes} = React;
const {Directions} = NavigationLinearPanResponder;
const {Directions} = NavigationCardStackPanResponder;
import type {
NavigationAnimatedValue,
@@ -58,7 +58,7 @@ import type {
import type {
NavigationGestureDirection,
} from 'NavigationLinearPanResponder';
} from 'NavigationCardStackPanResponder';
type Props = {
direction: NavigationGestureDirection,
@@ -80,7 +80,18 @@ const defaultProps = {
};
/**
* A controlled navigation view that renders a list of cards.
* A controlled navigation view that renders a stack of cards.
*
* +------------+
* +-+ |
* +-+ | |
* | | | |
* | | | Focused |
* | | | Card |
* | | | |
* +-+ | |
* +-+ |
* +------------+
*/
class NavigationCardStack extends React.Component {
_applyAnimation: NavigationAnimationSetter;
@@ -123,8 +134,8 @@ class NavigationCardStack extends React.Component {
NavigationCardStackStyleInterpolator.forHorizontal(props);
const panHandlers = isVertical ?
NavigationLinearPanResponder.forVertical(props) :
NavigationLinearPanResponder.forHorizontal(props);
NavigationCardStackPanResponder.forVertical(props) :
NavigationCardStackPanResponder.forHorizontal(props);
return (
<NavigationCard