Support custom card style interpolators
Summary: Transition animations are not very customizable right now with NavigationExperimental, unless I am missing something big. This PR allows NavigationCardStack to receive the `horizontalCardStyleInterpolator` and `verticalCardStyleInterpolator` props to override the default interpolators. See the gif, transition animation changes from the default one (with scale) to a custom one (without scale) when passing in a custom interpolator. (The custom interpolator is an exact copy of the one in `NavigationCardStackStyleInterpolator.forHorizontal`, minus the scale transform.) ![cmz0gagoec](https://cloud.githubusercontent.com/assets/1389312/20552499/af33667c-b119-11e6-97e7-bea9986a58e0.gif) Let me know if there's a robust way to test, but I couldn't find anything. **To address** The new `canUseNativeDriver` function on NavigationCardStackStyleInterpolator, which returns `true`, is dependent on the interpolator, so custom interpolators may need to falsify this. Didn't include it on the first pass since I wasn Closes https://github.com/facebook/react-native/pull/11082 Differential Revision: D4362540 Pulled By: ericvicenti fbshipit-source-id: 2ebd0047c147ac3d6c43ce880661c99de8fd0880
This commit is contained in:
parent
59276468f2
commit
c8a7f9e2d1
|
@ -50,6 +50,7 @@ import type {
|
|||
NavigationSceneRenderer,
|
||||
NavigationSceneRendererProps,
|
||||
NavigationTransitionProps,
|
||||
NavigationStyleInterpolator,
|
||||
} from 'NavigationTypeDefinition';
|
||||
|
||||
import type {
|
||||
|
@ -65,12 +66,13 @@ type Props = {
|
|||
cardStyle?: any,
|
||||
style: any,
|
||||
gestureResponseDistance?: ?number,
|
||||
enableGestures: ?boolean
|
||||
enableGestures: ?boolean,
|
||||
cardStyleInterpolator?: ?NavigationStyleInterpolator,
|
||||
};
|
||||
|
||||
type DefaultProps = {
|
||||
direction: NavigationGestureDirection,
|
||||
enableGestures: boolean
|
||||
enableGestures: boolean,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -141,10 +143,19 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
|
|||
|
||||
/**
|
||||
* The distance from the edge of the card which gesture response can start
|
||||
* for. Defaults value is `30`.
|
||||
* for. Default value is `30`.
|
||||
*/
|
||||
gestureResponseDistance: PropTypes.number,
|
||||
|
||||
/**
|
||||
* An interpolator function that is passed an object parameter of type
|
||||
* NavigationSceneRendererProps and should return a style object to apply to
|
||||
* the transitioning navigation card.
|
||||
*
|
||||
* Default interpolator transitions translateX, scale, and opacity.
|
||||
*/
|
||||
cardStyleInterpolator: PropTypes.func,
|
||||
|
||||
/**
|
||||
* Enable gestures. Default value is true.
|
||||
*
|
||||
|
@ -264,9 +275,11 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
|
|||
_renderScene(props: NavigationSceneRendererProps): React.Element<any> {
|
||||
const isVertical = this.props.direction === 'vertical';
|
||||
|
||||
const style = isVertical ?
|
||||
NavigationCardStackStyleInterpolator.forVertical(props) :
|
||||
NavigationCardStackStyleInterpolator.forHorizontal(props);
|
||||
const interpolator = this.props.cardStyleInterpolator || (isVertical ?
|
||||
NavigationCardStackStyleInterpolator.forVertical :
|
||||
NavigationCardStackStyleInterpolator.forHorizontal);
|
||||
|
||||
const style = interpolator(props);
|
||||
|
||||
let panHandlers = null;
|
||||
|
||||
|
|
Loading…
Reference in New Issue