From e19fa82dd2d2d428ebe6cdccb7d7434590b4c7ac Mon Sep 17 00:00:00 2001 From: Hedger Wang Date: Wed, 29 Jun 2016 18:28:06 -0700 Subject: [PATCH] Add an example for Pager built with NavigationTransitioner & Animated.View Summary: Add an example for Pager built with NavigationTransitioner & Animated.View This example demostrates how to apply pre-defined gesture handling and animation styles to the to build a Pager navigator. Reviewed By: ericvicenti Differential Revision: D3495807 fbshipit-source-id: 08e275010888925bc9fd1840e7052f975c95ad63 --- .../NavigationExperimentalExample.js | 1 + ...Transitioner-AnimatedView-pager-example.js | 280 ++++++++++++++++++ 2 files changed, 281 insertions(+) create mode 100644 Examples/UIExplorer/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js index 7046d6a21..16e31cc5c 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js @@ -36,6 +36,7 @@ const EXAMPLES = { 'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'), 'CardStack Example': require('./NavigationCardStack-example'), 'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'), + 'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'), }; const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample'; diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js b/Examples/UIExplorer/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js new file mode 100644 index 000000000..76ad688bc --- /dev/null +++ b/Examples/UIExplorer/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js @@ -0,0 +1,280 @@ +/** + * Copyright (c) 2013-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. + * + * The examples provided by Facebook are for non-commercial testing and + * evaluation purposes only. + * + * Facebook reserves all rights not expressly granted. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS + * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL + * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN + * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + * + * @flow + */ +'use strict'; + +const NavigationExampleRow = require('./NavigationExampleRow'); +const React = require('react'); +const ReactNative = require('react-native'); + +/** + * Basic example that shows how to use and + * to build a list of animated scenes that render the + * navigation state. + */ + +import type { + NavigationSceneRendererProps, + NavigationState, + NavigationTransitionProps, +} from 'NavigationTypeDefinition'; + +const { + Component, + PropTypes, +} = React; + +const { + Animated, + NavigationExperimental, + StyleSheet, + Text, + View, +} = ReactNative; + +const { + PropTypes: NavigationPropTypes, + StateUtils: NavigationStateUtils, + Transitioner: NavigationTransitioner, + Card: NavigationCard, +} = NavigationExperimental; + +const { + PagerPanResponder: NavigationPagerPanResponder, + PagerStyleInterpolator: NavigationPagerStyleInterpolator, +} = NavigationCard; + +function reducer(state: ?NavigationState, action: any): NavigationState { + if (!state) { + return { + index: 0, + routes: [ + {key: 'Step 1', color: '#ff0000'}, + {key: 'Step 2', color: '#ff7f00'}, + {key: 'Step 3', color: '#ffff00'}, + {key: 'Step 4', color: '#00ff00'}, + {key: 'Step 5', color: '#0000ff'}, + {key: 'Step 6', color: '#4b0082'}, + {key: 'Step 7', color: '#8f00ff'}, + ], + }; + } + + switch (action) { + case 'back': + return NavigationStateUtils.back(state); + case 'forward': + return NavigationStateUtils.forward(state); + } + return state; +} + +class Example extends Component { + state: NavigationState; + constructor(props: any, context: any) { + super(props, context); + this.state = reducer(); + } + + render(): ReactElement { + return ( + + this._navigate(action)} + /> + this._navigate('exit')} + /> + + ); + } + + _navigate(action: string): boolean { + if (action === 'exit') { + // Exits the example. `this.props.onExampleExit` is provided + // by the UI Explorer. + this.props.onExampleExit && this.props.onExampleExit(); + return false; + } + + const state = reducer(this.state, action); + if (state === this.state) { + return false; + } + + this.setState(state); + return true; + } + + // This public method is optional. If exists, the UI explorer will call it + // the "back button" is pressed. Normally this is the cases for Android only. + handleBackAction(): boolean { + return this._navigate('back'); + } +} + +class ExampleNavigator extends Component { + _render: Function; + _renderScene: Function; + _back: Function; + _forward: Function; + + props: { + navigate: Function, + navigationState: NavigationState, + }; + + static propTypes: { + navigationState: NavigationPropTypes.navigationState.isRequired, + navigate: PropTypes.func.isRequired, + }; + + constructor(props, context) { + super(props, context); + this._render = this._render.bind(this); + this._renderScene = this._renderScene.bind(this); + this._back = this._back.bind(this); + this._forward = this._forward.bind(this); + } + + render(): ReactElement { + return ( + + ); + } + + _render( + transitionProps: NavigationTransitionProps, + ): ReactElement { + const scenes = transitionProps.scenes.map((scene) => { + const sceneProps = { + ...transitionProps, + scene, + }; + return this._renderScene(sceneProps); + }); + return ( + + {scenes} + + ); + } + + _renderScene( + sceneProps: NavigationSceneRendererProps, + ): ReactElement { + return ( + + ); + } + + _back(): void { + this.props.navigate('back'); + } + + _forward(): void { + this.props.navigate('forward'); + } +} + +class ExampleScene extends Component { + props: NavigationSceneRendererProps & { + navigate: Function, + }; + + static propTypes = { + ...NavigationPropTypes.SceneRendererProps, + navigate: PropTypes.func.isRequired, + }; + + render(): ReactElement { + const {scene, navigate} = this.props; + + const panHandlers = NavigationPagerPanResponder.forHorizontal({ + ...this.props, + onNavigateBack: () => navigate('back'), + onNavigateForward: () => navigate('forward'), + }); + + const route: any = scene.route; + const style = [ + styles.scene, + {backgroundColor: route.color}, + NavigationPagerStyleInterpolator.forHorizontal(this.props), + ]; + + return ( + + + + {scene.route.key} + + + + ); + } +} + +const styles = StyleSheet.create({ + example: { + flex: 1, + }, + navigator: { + flex: 1, + }, + scene: { + backgroundColor: '#000', + bottom: 0, + flex: 1, + left: 0, + position: 'absolute', + right: 0, + top: 0, + }, + scrollView: { + flex: 1, + padding: 50, + }, + heading: { + alignItems : 'center', + flex: 1, + justifyContent: 'center', + }, + headingText: { + color: '#222', + fontSize: 24, + fontWeight: 'bold', + }, +}); + +module.exports = Example;