disable interaction during transition.

Summary:When navigating from one view to another you can still interact with
the current view. This means that a user can tap a button multiple times and trigger multiple transitions.

The view that is being transitioned off the screen should not be allowed to
receive any user interaction while it is being transitioned.

Reviewed By: javache

Differential Revision: D3143202

fb-gh-sync-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
fbshipit-source-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
This commit is contained in:
Hedger Wang 2016-04-06 16:13:59 -07:00 committed by Facebook Github Bot 7
parent 06b2998de8
commit eecdf7d356
1 changed files with 28 additions and 8 deletions

View File

@ -80,24 +80,44 @@ class NavigationCard extends React.Component<any, Props, any> {
}
render(): ReactElement {
let {
style,
const {
panHandlers,
renderScene,
...props,
style,
...props, /* NavigationSceneRendererProps */
} = this.props;
let viewStyle = null;
if (style === undefined) {
// fall back to default style.
style = NavigationCardStackStyleInterpolator.forHorizontal(props);
viewStyle = NavigationCardStackStyleInterpolator.forHorizontal(props);
} else {
viewStyle = style;
}
const {
navigationState,
scene,
} = props;
const interactive = navigationState.index === scene.index && !scene.isStale;
const pointerEvents = interactive ? 'auto' : 'none';
let viewPanHandlers = null;
if (interactive) {
if (panHandlers === undefined) {
// fall back to default pan handlers.
panHandlers = NavigationCardStackPanResponder.forHorizontal(props);
viewPanHandlers = NavigationCardStackPanResponder.forHorizontal(props);
} else {
viewPanHandlers = panHandlers;
}
}
return (
<Animated.View {...panHandlers} style={[styles.main, style]}>
<Animated.View
{...viewPanHandlers}
pointerEvents={pointerEvents}
style={[styles.main, viewStyle]}>
{renderScene(props)}
</Animated.View>
);