mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-06-19 21:29:36 +08:00
Clean up examples.
Summary: The recent and upcoming API refactoring works makes maintaining the examples harder and harder. This removes the old examples that use too much deprecated APIs such as Reducers, Animated View. The new examples will be forcus on using new API with all-in-one sample codes and detailed documentation. Reviewed By: ericvicenti Differential Revision: D3354711 fbshipit-source-id: ac6360b1573989eb075d91cb9bf1ae8357dce7fa
This commit is contained in:
Hedger Wang
committed by
Facebook Github Bot 3
Facebook Github Bot 3
parent
486dbe4e8f
commit
69627bf914
@@ -1,164 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
|
||||
const {
|
||||
Animated,
|
||||
NavigationExperimental,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
} = ReactNative;
|
||||
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
|
||||
const {
|
||||
AnimatedView: NavigationAnimatedView,
|
||||
Card: NavigationCard,
|
||||
Header: NavigationHeader,
|
||||
Reducer: NavigationReducer,
|
||||
} = NavigationExperimental;
|
||||
|
||||
const ExampleReducer = NavigationReducer.StackReducer({
|
||||
getPushedReducerForAction: (action) => {
|
||||
if (action.type === 'push') {
|
||||
return (state) => state || {key: action.key};
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getReducerForState: (initialState) => (state) => state || initialState,
|
||||
initialState: {
|
||||
key: 'AnimatedExampleStackKey',
|
||||
index: 0,
|
||||
routes: [
|
||||
{key: 'First Route'},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
class NavigationAnimatedExample extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = ExampleReducer();
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this._renderCard = this._renderCard.bind(this);
|
||||
this._renderHeader = this._renderHeader.bind(this);
|
||||
this._renderScene = this._renderScene.bind(this);
|
||||
this._renderTitleComponent = this._renderTitleComponent.bind(this);
|
||||
this._handleAction = this._handleAction.bind(this);
|
||||
}
|
||||
|
||||
_handleAction(action): boolean {
|
||||
if (!action) {
|
||||
return false;
|
||||
}
|
||||
const newState = ExampleReducer(this.state, action);
|
||||
if (newState === this.state) {
|
||||
return false;
|
||||
}
|
||||
this.setState(newState);
|
||||
return true;
|
||||
}
|
||||
|
||||
handleBackAction(): boolean {
|
||||
return this._handleAction({ type: 'BackAction', });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NavigationAnimatedView
|
||||
navigationState={this.state}
|
||||
style={styles.animatedView}
|
||||
onNavigate={this._handleAction}
|
||||
renderOverlay={this._renderHeader}
|
||||
applyAnimation={(pos, navState) => {
|
||||
Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
|
||||
}}
|
||||
renderScene={this._renderCard}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderHeader(/*NavigationSceneRendererProps*/ props) {
|
||||
return (
|
||||
<NavigationHeader
|
||||
{...props}
|
||||
renderTitleComponent={this._renderTitleComponent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
|
||||
return (
|
||||
<NavigationHeader.Title>
|
||||
{props.scene.route.key}
|
||||
</NavigationHeader.Title>
|
||||
);
|
||||
}
|
||||
|
||||
_renderCard(/*NavigationSceneRendererProps*/ props) {
|
||||
return (
|
||||
<NavigationCard
|
||||
{...props}
|
||||
key={'card_' + props.scene.route.key}
|
||||
renderScene={this._renderScene}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderScene(/*NavigationSceneRendererProps*/ props) {
|
||||
return (
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<NavigationExampleRow
|
||||
text={props.scene.route.key}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Push!"
|
||||
onPress={() => {
|
||||
props.onNavigate({
|
||||
type: 'push',
|
||||
key: 'Route #' + props.scenes.length,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Exit Animated Nav Example"
|
||||
onPress={this.props.onExampleExit}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
animatedView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
marginTop: NavigationHeader.HEIGHT,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationAnimatedExample;
|
||||
@@ -1,110 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
} = ReactNative;
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
const {
|
||||
Reducer: NavigationReducer,
|
||||
} = NavigationExperimental;
|
||||
|
||||
const ExampleReducer = NavigationReducer.StackReducer({
|
||||
getPushedReducerForAction: (action) => {
|
||||
if (action.type === 'push') {
|
||||
return (state) => state || {key: action.key};
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getReducerForState: (initialState) => (state) => state || initialState,
|
||||
initialState: {
|
||||
key: 'BasicExampleStackKey',
|
||||
index: 0,
|
||||
routes: [
|
||||
{key: 'First Route'},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const NavigationBasicExample = React.createClass({
|
||||
|
||||
getInitialState: function() {
|
||||
return ExampleReducer();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<ScrollView style={styles.topView}>
|
||||
<NavigationExampleRow
|
||||
text={`Current page: ${this.state.routes[this.state.index].key}`}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text={`Push page #${this.state.routes.length}`}
|
||||
onPress={() => {
|
||||
this._handleAction({ type: 'push', key: 'page #' + this.state.routes.length });
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="pop"
|
||||
onPress={() => {
|
||||
this._handleAction({ type: 'BackAction' });
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Exit Basic Nav Example"
|
||||
onPress={this.props.onExampleExit}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
},
|
||||
|
||||
_handleAction(action) {
|
||||
if (!action) {
|
||||
return false;
|
||||
}
|
||||
const newState = ExampleReducer(this.state, action);
|
||||
if (newState === this.state) {
|
||||
return false;
|
||||
}
|
||||
this.setState(newState);
|
||||
return true;
|
||||
},
|
||||
|
||||
handleBackAction() {
|
||||
return this._handleAction({ type: 'BackAction' });
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
topView: {
|
||||
backgroundColor: '#E9E9EF',
|
||||
flex: 1,
|
||||
paddingTop: 30,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationBasicExample;
|
||||
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
|
||||
const emptyFunction = require('fbjs/lib/emptyFunction');
|
||||
|
||||
/**
|
||||
* Basic example that shows how to use <NavigationCardStack /> to build
|
||||
* an app with controlled navigation system.
|
||||
*/
|
||||
const {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
} = ReactNative;
|
||||
|
||||
const {
|
||||
CardStack: NavigationCardStack,
|
||||
StateUtils: NavigationStateUtils,
|
||||
} = NavigationExperimental;
|
||||
|
||||
// Step 1:
|
||||
// Define a component for your application.
|
||||
class YourApplication extends React.Component {
|
||||
|
||||
// This sets up the initial navigation state.
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
// This defines the initial navigation state.
|
||||
navigationState: {
|
||||
index: 0, // starts with first route focused.
|
||||
routes: [{key: 'Welcome'}], // starts with only one route.
|
||||
},
|
||||
};
|
||||
|
||||
this._exit = this._exit.bind(this);
|
||||
this._onNavigationChange = this._onNavigationChange.bind(this);
|
||||
}
|
||||
|
||||
// User your own navigator (see Step 2).
|
||||
render(): ReactElement {
|
||||
return (
|
||||
<YourNavigator
|
||||
navigationState={this.state.navigationState}
|
||||
onNavigationChange={this._onNavigationChange}
|
||||
onExit={this._exit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// This handles the navigation state changes. You're free and responsible
|
||||
// to define the API that changes that navigation state. In this exmaple,
|
||||
// we'd simply use a `function(type: string)` to update the navigation state.
|
||||
_onNavigationChange(type: string): void {
|
||||
let {navigationState} = this.state;
|
||||
switch (type) {
|
||||
case 'push':
|
||||
// push a new route.
|
||||
const route = {key: Date.now()};
|
||||
navigationState = NavigationStateUtils.push(navigationState, route);
|
||||
break;
|
||||
|
||||
case 'pop':
|
||||
navigationState = NavigationStateUtils.pop(navigationState);
|
||||
break;
|
||||
}
|
||||
|
||||
// NavigationStateUtils gives you back the same `navigationState` if nothing
|
||||
// has changed. You could use that to avoid redundant re-rendering.
|
||||
if (this.state.navigationState !== navigationState) {
|
||||
this.setState({navigationState});
|
||||
}
|
||||
}
|
||||
|
||||
// Exits the example. `this.props.onExampleExit` is provided
|
||||
// by the UI Explorer.
|
||||
_exit(): void {
|
||||
this.props.onExampleExit && this.props.onExampleExit();
|
||||
}
|
||||
|
||||
// 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._onNavigationChange('pop');
|
||||
}
|
||||
}
|
||||
|
||||
// Step 2:
|
||||
// Define your own controlled navigator.
|
||||
//
|
||||
// +------------+
|
||||
// +-+ |
|
||||
// +-+ | |
|
||||
// | | | |
|
||||
// | | | Active |
|
||||
// | | | Scene |
|
||||
// | | | |
|
||||
// +-+ | |
|
||||
// +-+ |
|
||||
// +------------+
|
||||
//
|
||||
class YourNavigator extends React.Component {
|
||||
|
||||
// This sets up the methods (e.g. Pop, Push) for navigation.
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
|
||||
this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
|
||||
|
||||
this._renderScene = this._renderScene.bind(this);
|
||||
}
|
||||
|
||||
// Now use the `NavigationCardStack` to render the scenes.
|
||||
render(): ReactElement {
|
||||
// TODO(hedger): prop `onNavigate` will be deprecated soon. For now,
|
||||
// use `emptyFunction` as a placeholder.
|
||||
return (
|
||||
<NavigationCardStack
|
||||
onNavigate={emptyFunction}
|
||||
onNavigateBack={this._onPopRoute}
|
||||
navigationState={this.props.navigationState}
|
||||
renderScene={this._renderScene}
|
||||
style={styles.navigator}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Render a scene for route.
|
||||
// The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
|
||||
// as type `NavigationSceneRendererProps`.
|
||||
_renderScene(sceneProps: Object): ReactElement {
|
||||
return (
|
||||
<YourScene
|
||||
route={sceneProps.scene.route}
|
||||
onPushRoute={this._onPushRoute}
|
||||
onPopRoute={this._onPopRoute}
|
||||
onExit={this.props.onExit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Step 3:
|
||||
// Define your own scene.
|
||||
class YourScene extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<NavigationExampleRow
|
||||
text={'route = ' + this.props.route.key}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Push Route"
|
||||
onPress={this.props.onPushRoute}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Pop Route"
|
||||
onPress={this.props.onPopRoute}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Exit Card Stack Example"
|
||||
onPress={this.props.onExit}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
navigator: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
marginTop: 64
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = YourApplication;
|
||||
@@ -1,165 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
|
||||
const {
|
||||
NavigationExperimental,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
} = ReactNative;
|
||||
|
||||
const {
|
||||
CardStack: NavigationCardStack,
|
||||
StateUtils: NavigationStateUtils,
|
||||
} = NavigationExperimental;
|
||||
|
||||
function createReducer(initialState) {
|
||||
return (currentState = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case 'push':
|
||||
return NavigationStateUtils.push(currentState, {key: action.key});
|
||||
|
||||
case 'BackAction':
|
||||
case 'back':
|
||||
case 'pop':
|
||||
return currentState.index > 0 ?
|
||||
NavigationStateUtils.pop(currentState) :
|
||||
currentState;
|
||||
|
||||
default:
|
||||
return currentState;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const ExampleReducer = createReducer({
|
||||
index: 0,
|
||||
key: 'exmaple',
|
||||
routes: [{key: 'First Route'}],
|
||||
});
|
||||
|
||||
class NavigationCardStackExample extends React.Component {
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
isHorizontal: true,
|
||||
navState: ExampleReducer(undefined, {}),
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this._renderScene = this._renderScene.bind(this);
|
||||
this._toggleDirection = this._toggleDirection.bind(this);
|
||||
this._handleAction = this._handleAction.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NavigationCardStack
|
||||
direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
|
||||
navigationState={this.state.navState}
|
||||
onNavigate={this._handleAction}
|
||||
renderScene={this._renderScene}
|
||||
style={styles.main}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_handleAction(action): boolean {
|
||||
if (!action) {
|
||||
return false;
|
||||
}
|
||||
const newState = ExampleReducer(this.state.navState, action);
|
||||
if (newState === this.state.navState) {
|
||||
return false;
|
||||
}
|
||||
this.setState({
|
||||
navState: newState,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
handleBackAction(): boolean {
|
||||
return this._handleAction({ type: 'BackAction', });
|
||||
}
|
||||
|
||||
_renderScene(/*NavigationSceneRendererProps*/ props) {
|
||||
return (
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<NavigationExampleRow
|
||||
text={
|
||||
this.state.isHorizontal ?
|
||||
'direction = "horizontal"' :
|
||||
'direction = "vertical"'
|
||||
}
|
||||
onPress={this._toggleDirection}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text={'route = ' + props.scene.route.key}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Push Route"
|
||||
onPress={() => {
|
||||
props.onNavigate({
|
||||
type: 'push',
|
||||
key: 'Route ' + props.scenes.length,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Pop Route"
|
||||
onPress={() => {
|
||||
props.onNavigate({
|
||||
type: 'pop',
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Exit Card Stack Example"
|
||||
onPress={this.props.onExampleExit}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
_toggleDirection() {
|
||||
this.setState({
|
||||
isHorizontal: !this.state.isHorizontal,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
main: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
marginTop: 64
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationCardStackExample;
|
||||
@@ -1,321 +0,0 @@
|
||||
/**
|
||||
* 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 React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
const NavigationExampleTabBar = require('./NavigationExampleTabBar');
|
||||
|
||||
const {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
View,
|
||||
} = ReactNative;
|
||||
|
||||
const {
|
||||
CardStack: NavigationCardStack,
|
||||
Header: NavigationHeader,
|
||||
Reducer: NavigationReducer,
|
||||
} = NavigationExperimental;
|
||||
|
||||
|
||||
import type {
|
||||
NavigationState,
|
||||
NavigationSceneRenderer,
|
||||
NavigationSceneRendererProps,
|
||||
} from 'NavigationTypeDefinition';
|
||||
|
||||
type Action = {
|
||||
isExitAction?: boolean,
|
||||
};
|
||||
|
||||
const ExampleExitAction = () => ({
|
||||
isExitAction: true,
|
||||
});
|
||||
|
||||
ExampleExitAction.match = (action: Action) => (
|
||||
action && action.isExitAction === true
|
||||
);
|
||||
|
||||
const PageAction = (type) => ({
|
||||
type,
|
||||
isPageAction: true,
|
||||
});
|
||||
|
||||
PageAction.match = (action) => (
|
||||
action && action.isPageAction === true
|
||||
);
|
||||
|
||||
const ExampleProfilePageAction = (type) => ({
|
||||
...PageAction(type),
|
||||
isProfilePageAction: true,
|
||||
});
|
||||
|
||||
ExampleProfilePageAction.match = (action) => (
|
||||
action && action.isProfilePageAction === true
|
||||
);
|
||||
|
||||
const ExampleInfoAction = () => PageAction('InfoPage');
|
||||
|
||||
const ExampleNotifProfileAction = () => ExampleProfilePageAction('NotifProfilePage');
|
||||
|
||||
const _jsInstanceUniqueId = '' + Date.now();
|
||||
|
||||
let _uniqueIdCount = 0;
|
||||
|
||||
function pageStateActionMap(action) {
|
||||
return {
|
||||
key: 'page-' + _jsInstanceUniqueId + '-' + (_uniqueIdCount++),
|
||||
type: action.type,
|
||||
};
|
||||
}
|
||||
|
||||
const ExampleAppReducer = NavigationReducer.TabsReducer({
|
||||
key: 'AppNavigationState',
|
||||
initialIndex: 0,
|
||||
tabReducers: [
|
||||
NavigationReducer.StackReducer({
|
||||
getPushedReducerForAction: (action) => {
|
||||
if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
|
||||
return (state) => (state || pageStateActionMap(action));
|
||||
}
|
||||
return null;
|
||||
},
|
||||
initialState: {
|
||||
key: 'notifs',
|
||||
index: 0,
|
||||
routes: [
|
||||
{key: 'base', type: 'NotifsPage'},
|
||||
],
|
||||
},
|
||||
}),
|
||||
NavigationReducer.StackReducer({
|
||||
getPushedReducerForAction: (action) => {
|
||||
if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
|
||||
return (state) => (state || pageStateActionMap(action));
|
||||
}
|
||||
return null;
|
||||
},
|
||||
initialState: {
|
||||
key: 'settings',
|
||||
index: 0,
|
||||
routes: [
|
||||
{key: 'base', type: 'SettingsPage'},
|
||||
],
|
||||
},
|
||||
}),
|
||||
NavigationReducer.StackReducer({
|
||||
getPushedReducerForAction: (action) => {
|
||||
if (PageAction.match(action) || ExampleProfilePageAction.match(action)) {
|
||||
return (state) => (state || pageStateActionMap(action));
|
||||
}
|
||||
return null;
|
||||
},
|
||||
initialState: {
|
||||
key: 'profile',
|
||||
index: 0,
|
||||
routes: [
|
||||
{key: 'base', type: 'ProfilePage'},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
function stateTypeTitleMap(pageState: any) {
|
||||
switch (pageState.type) {
|
||||
case 'ProfilePage':
|
||||
return 'Profile Page';
|
||||
case 'NotifsPage':
|
||||
return 'Notifications';
|
||||
case 'SettingsPage':
|
||||
return 'Settings';
|
||||
case 'InfoPage':
|
||||
return 'Info Page';
|
||||
case 'NotifProfilePage':
|
||||
return 'Page in Profile';
|
||||
}
|
||||
}
|
||||
|
||||
class ExampleTabScreen extends React.Component {
|
||||
_renderCard: NavigationSceneRenderer;
|
||||
_renderHeader: NavigationSceneRenderer;
|
||||
_renderScene: NavigationSceneRenderer;
|
||||
|
||||
componentWillMount() {
|
||||
this._renderHeader = this._renderHeader.bind(this);
|
||||
this._renderScene = this._renderScene.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NavigationCardStack
|
||||
style={styles.tabContent}
|
||||
navigationState={this.props.navigationState}
|
||||
onNavigate={this.props.onNavigate}
|
||||
renderOverlay={this._renderHeader}
|
||||
renderScene={this._renderScene}
|
||||
/>
|
||||
);
|
||||
}
|
||||
_renderHeader(props: NavigationSceneRendererProps) {
|
||||
return (
|
||||
<NavigationHeader
|
||||
{...props}
|
||||
renderTitleComponent={this._renderTitleComponent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderTitleComponent(props: NavigationSceneRendererProps) {
|
||||
return (
|
||||
<NavigationHeader.Title>
|
||||
{stateTypeTitleMap(props.scene.route)}
|
||||
</NavigationHeader.Title>
|
||||
);
|
||||
}
|
||||
|
||||
_renderScene(props: NavigationSceneRendererProps) {
|
||||
const {onNavigate} = props;
|
||||
return (
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<NavigationExampleRow
|
||||
text="Open page"
|
||||
onPress={() => {
|
||||
onNavigate(ExampleInfoAction());
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Open a page in the profile tab"
|
||||
onPress={() => {
|
||||
onNavigate(ExampleNotifProfileAction());
|
||||
}}
|
||||
/>
|
||||
<NavigationExampleRow
|
||||
text="Exit Composition Example"
|
||||
onPress={() => {
|
||||
onNavigate(ExampleExitAction());
|
||||
}}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavigationCompositionExample extends React.Component {
|
||||
state: NavigationState;
|
||||
constructor() {
|
||||
super();
|
||||
this.state = ExampleAppReducer(undefined, {});
|
||||
}
|
||||
handleAction(action: Object): boolean {
|
||||
if (!action) {
|
||||
return false;
|
||||
}
|
||||
const newState = ExampleAppReducer(this.state, action);
|
||||
if (newState === this.state) {
|
||||
return false;
|
||||
}
|
||||
this.setState(newState);
|
||||
return true;
|
||||
}
|
||||
handleBackAction(): boolean {
|
||||
return this.handleAction({ type: 'BackAction' });
|
||||
}
|
||||
render() {
|
||||
if (!this.state) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<View style={styles.topView}>
|
||||
<ExampleMainView
|
||||
navigationState={this.state}
|
||||
onExampleExit={this.props.onExampleExit}
|
||||
onNavigate={this.handleAction.bind(this)}
|
||||
/>
|
||||
<NavigationExampleTabBar
|
||||
tabs={this.state.routes}
|
||||
index={this.state.index}
|
||||
onNavigate={this.handleAction.bind(this)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ExampleMainView extends React.Component {
|
||||
_renderScene: Function;
|
||||
_handleNavigation: Function;
|
||||
|
||||
componentWillMount() {
|
||||
this._renderScene = this._renderScene.bind(this);
|
||||
this._handleNavigation = this._handleNavigation.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.tabsContent}>
|
||||
{this._renderScene()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderScene(): ReactElement<any> {
|
||||
const {navigationState} = this.props;
|
||||
const childState = navigationState.routes[navigationState.index];
|
||||
return (
|
||||
<ExampleTabScreen
|
||||
key={'tab_screen' + childState.key}
|
||||
navigationState={childState}
|
||||
onNavigate={this._handleNavigation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_handleNavigation(action: Object) {
|
||||
if (ExampleExitAction.match(action)) {
|
||||
this.props.onExampleExit();
|
||||
return;
|
||||
}
|
||||
this.props.onNavigate(action);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
topView: {
|
||||
flex: 1,
|
||||
},
|
||||
tabsContent: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
marginTop: NavigationHeader.HEIGHT
|
||||
},
|
||||
tabContent: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationCompositionExample;
|
||||
@@ -1,83 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const NavigationExperimental = require('NavigationExperimental');
|
||||
const React = require('react');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
const Text = require('Text');
|
||||
const TouchableOpacity = require('TouchableOpacity');
|
||||
const View = require('View');
|
||||
const {
|
||||
Reducer: NavigationReducer,
|
||||
} = NavigationExperimental;
|
||||
const {
|
||||
JumpToAction,
|
||||
} = NavigationReducer.TabsReducer;
|
||||
|
||||
const NavigationExampleTabBar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={styles.tabBar}>
|
||||
{this.props.tabs.map(this._renderTab)}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
_renderTab: function(tab, index) {
|
||||
const textStyle = [styles.tabButtonText];
|
||||
if (this.props.index === index) {
|
||||
textStyle.push(styles.selectedTabButtonText);
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.tabButton}
|
||||
key={tab.key}
|
||||
onPress={() => {
|
||||
this.props.onNavigate(JumpToAction(index));
|
||||
}}>
|
||||
<Text style={textStyle}>
|
||||
{tab.key}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
tabBar: {
|
||||
height: 50,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
tabButton: {
|
||||
flex: 1,
|
||||
},
|
||||
tabButtonText: {
|
||||
paddingTop: 20,
|
||||
textAlign: 'center',
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
selectedTabButtonText: {
|
||||
color: 'blue',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationExampleTabBar;
|
||||
@@ -33,12 +33,7 @@ const View = require('View');
|
||||
* To learn how to use the Navigation API, take a look at the following example files:
|
||||
*/
|
||||
const EXAMPLES = {
|
||||
'Tabs': require('./NavigationTabsExample'),
|
||||
'Basic': require('./NavigationBasicExample'),
|
||||
'Animated Example': require('./NavigationAnimatedExample'),
|
||||
'Composition': require('./NavigationCompositionExample'),
|
||||
'Card Stack Example': require('./NavigationCardStackExample'),
|
||||
'Tic Tac Toe': require('./NavigationTicTacToeExample'),
|
||||
'NavigationCardStack Example': require('./NavigationCardStack-example'),
|
||||
};
|
||||
|
||||
const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactNative = require('react-native');
|
||||
const {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
View,
|
||||
} = ReactNative;
|
||||
const {
|
||||
Reducer: NavigationReducer,
|
||||
} = NavigationExperimental;
|
||||
|
||||
const NavigationExampleRow = require('./NavigationExampleRow');
|
||||
const NavigationExampleTabBar = require('./NavigationExampleTabBar');
|
||||
|
||||
class ExmpleTabPage extends React.Component {
|
||||
render() {
|
||||
const currentTabRoute = this.props.tabs[this.props.index];
|
||||
return (
|
||||
<ScrollView style={styles.tabPage}>
|
||||
<NavigationExampleRow
|
||||
text={`Current Tab is: ${currentTabRoute.key}`}
|
||||
/>
|
||||
{this.props.tabs.map((tab, index) => (
|
||||
<NavigationExampleRow
|
||||
key={tab.key}
|
||||
text={`Go to ${tab.key}`}
|
||||
onPress={() => {
|
||||
this.props.onNavigate(NavigationReducer.TabsReducer.JumpToAction(index));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<NavigationExampleRow
|
||||
text="Exit Tabs Example"
|
||||
onPress={this.props.onExampleExit}
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const ExampleTabsReducer = NavigationReducer.TabsReducer({
|
||||
tabReducers: [
|
||||
(lastRoute) => lastRoute || {key: 'one'},
|
||||
(lastRoute) => lastRoute || {key: 'two'},
|
||||
(lastRoute) => lastRoute || {key: 'three'},
|
||||
],
|
||||
});
|
||||
|
||||
class NavigationTabsExample extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = ExampleTabsReducer(undefined, {});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.topView}>
|
||||
<ExmpleTabPage
|
||||
tabs={this.state.routes}
|
||||
index={this.state.index}
|
||||
onExampleExit={this.props.onExampleExit}
|
||||
onNavigate={this.handleAction.bind(this)}
|
||||
/>
|
||||
<NavigationExampleTabBar
|
||||
tabs={this.state.routes}
|
||||
index={this.state.index}
|
||||
onNavigate={this.handleAction.bind(this)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
handleAction(action) {
|
||||
if (!action) {
|
||||
return false;
|
||||
}
|
||||
const newState = ExampleTabsReducer(this.state, action);
|
||||
if (newState === this.state) {
|
||||
return false;
|
||||
}
|
||||
this.setState(newState);
|
||||
return true;
|
||||
}
|
||||
handleBackAction() {
|
||||
return this.handleAction({ type: 'BackAction' });
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
topView: {
|
||||
flex: 1,
|
||||
paddingTop: 30,
|
||||
},
|
||||
tabPage: {
|
||||
backgroundColor: '#E9E9EF',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationTabsExample;
|
||||
@@ -1,326 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @providesModule NavigationTicTacToeExample
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
const Text = require('Text');
|
||||
const TouchableHighlight = require('TouchableHighlight');
|
||||
const View = require('View');
|
||||
|
||||
type GameGrid = Array<Array<?string>>;
|
||||
|
||||
const evenOddPlayerMap = ['O', 'X'];
|
||||
const rowLetterMap = ['a', 'b', 'c'];
|
||||
|
||||
function parseGame(game: string): GameGrid {
|
||||
const gameTurns = game ? game.split('-') : [];
|
||||
const grid = Array(3);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const row = Array(3);
|
||||
for (let j = 0; j < 3; j++) {
|
||||
const turnIndex = gameTurns.indexOf(rowLetterMap[i] + j);
|
||||
if (turnIndex === -1) {
|
||||
row[j] = null;
|
||||
} else {
|
||||
row[j] = evenOddPlayerMap[turnIndex % 2];
|
||||
}
|
||||
}
|
||||
grid[i] = row;
|
||||
}
|
||||
return grid;
|
||||
}
|
||||
|
||||
function playTurn(game: string, row: number, col: number): string {
|
||||
const turn = rowLetterMap[row] + col;
|
||||
return game ? (game + '-' + turn) : turn;
|
||||
}
|
||||
|
||||
function getWinner(gameString: string): ?string {
|
||||
const game = parseGame(gameString);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (game[i][0] !== null && game[i][0] === game[i][1] &&
|
||||
game[i][0] === game[i][2]) {
|
||||
return game[i][0];
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (game[0][i] !== null && game[0][i] === game[1][i] &&
|
||||
game[0][i] === game[2][i]) {
|
||||
return game[0][i];
|
||||
}
|
||||
}
|
||||
if (game[0][0] !== null && game[0][0] === game[1][1] &&
|
||||
game[0][0] === game[2][2]) {
|
||||
return game[0][0];
|
||||
}
|
||||
if (game[0][2] !== null && game[0][2] === game[1][1] &&
|
||||
game[0][2] === game[2][0]) {
|
||||
return game[0][2];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function isGameOver(gameString: string): boolean {
|
||||
if (getWinner(gameString)) {
|
||||
return true;
|
||||
}
|
||||
const game = parseGame(gameString);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
if (game[i][j] === null) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
class Cell extends React.Component {
|
||||
props: any;
|
||||
cellStyle() {
|
||||
switch (this.props.player) {
|
||||
case 'X':
|
||||
return styles.cellX;
|
||||
case 'O':
|
||||
return styles.cellO;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
textStyle() {
|
||||
switch (this.props.player) {
|
||||
case 'X':
|
||||
return styles.cellTextX;
|
||||
case 'O':
|
||||
return styles.cellTextO;
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
onPress={this.props.onPress}
|
||||
underlayColor="transparent"
|
||||
activeOpacity={0.5}>
|
||||
<View style={[styles.cell, this.cellStyle()]}>
|
||||
<Text style={[styles.cellText, this.textStyle()]}>
|
||||
{this.props.player}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function GameEndOverlay(props) {
|
||||
if (!isGameOver(props.game)) {
|
||||
return <View />;
|
||||
}
|
||||
const winner = getWinner(props.game);
|
||||
return (
|
||||
<View style={styles.overlay}>
|
||||
<Text style={styles.overlayMessage}>
|
||||
{winner ? winner + ' wins!' : 'It\'s a tie!'}
|
||||
</Text>
|
||||
<TouchableHighlight
|
||||
onPress={() => props.onNavigate(GameActions.Reset())}
|
||||
underlayColor="transparent"
|
||||
activeOpacity={0.5}>
|
||||
<View style={styles.newGame}>
|
||||
<Text style={styles.newGameText}>New Game</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TicTacToeGame(props) {
|
||||
const rows = parseGame(props.game).map((cells, row) =>
|
||||
<View key={'row' + row} style={styles.row}>
|
||||
{cells.map((player, col) =>
|
||||
<Cell
|
||||
key={'cell' + col}
|
||||
player={player}
|
||||
onPress={() => props.onNavigate(GameActions.Turn(row, col))}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text
|
||||
style={styles.closeButton}
|
||||
onPress={props.onExampleExit}>
|
||||
Close
|
||||
</Text>
|
||||
<Text style={styles.title}>EXTREME T3</Text>
|
||||
<View style={styles.board}>
|
||||
{rows}
|
||||
</View>
|
||||
<GameEndOverlay
|
||||
game={props.game}
|
||||
onNavigate={props.onNavigate}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const GameActions = {
|
||||
Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
|
||||
Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
|
||||
};
|
||||
|
||||
function GameReducer(lastGame: ?string, action: Object): string {
|
||||
if (!lastGame) {
|
||||
lastGame = '';
|
||||
}
|
||||
if (action.type === 'TicTacToeResetAction') {
|
||||
return '';
|
||||
}
|
||||
if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
|
||||
return playTurn(lastGame, action.row, action.col);
|
||||
}
|
||||
return lastGame;
|
||||
}
|
||||
|
||||
type AppState = {
|
||||
game: string,
|
||||
};
|
||||
|
||||
class NavigationTicTacToeExample extends React.Component {
|
||||
_handleAction: Function;
|
||||
state: AppState;
|
||||
constructor() {
|
||||
super();
|
||||
this._handleAction = this._handleAction.bind(this);
|
||||
this.state = {
|
||||
game: ''
|
||||
};
|
||||
}
|
||||
_handleAction(action: Object) {
|
||||
const newState = GameReducer(this.state.game, action);
|
||||
if (newState !== this.state.game) {
|
||||
this.setState({
|
||||
game: newState,
|
||||
});
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<TicTacToeGame
|
||||
game={this.state && this.state.game}
|
||||
onExampleExit={this.props.onExampleExit}
|
||||
onNavigate={this._handleAction}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
left: 10,
|
||||
top: 30,
|
||||
fontSize: 14,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
title: {
|
||||
fontFamily: 'Chalkduster',
|
||||
fontSize: 39,
|
||||
marginBottom: 20,
|
||||
},
|
||||
board: {
|
||||
padding: 5,
|
||||
backgroundColor: '#47525d',
|
||||
borderRadius: 10,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
cell: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#7b8994',
|
||||
margin: 5,
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
cellX: {
|
||||
backgroundColor: '#72d0eb',
|
||||
},
|
||||
cellO: {
|
||||
backgroundColor: '#7ebd26',
|
||||
},
|
||||
cellText: {
|
||||
fontSize: 50,
|
||||
fontFamily: 'AvenirNext-Bold',
|
||||
},
|
||||
cellTextX: {
|
||||
color: '#19a9e5',
|
||||
},
|
||||
cellTextO: {
|
||||
color: '#b9dc2f',
|
||||
},
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(221, 221, 221, 0.5)',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
overlayMessage: {
|
||||
fontSize: 40,
|
||||
marginBottom: 20,
|
||||
marginLeft: 20,
|
||||
marginRight: 20,
|
||||
fontFamily: 'AvenirNext-DemiBold',
|
||||
textAlign: 'center',
|
||||
},
|
||||
newGame: {
|
||||
backgroundColor: '#887766',
|
||||
padding: 20,
|
||||
borderRadius: 5,
|
||||
},
|
||||
newGameText: {
|
||||
color: 'white',
|
||||
fontSize: 20,
|
||||
fontFamily: 'AvenirNext-DemiBold',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationTicTacToeExample;
|
||||
@@ -65,6 +65,9 @@ function push(state: NavigationState, newChildState: NavigationRoute): Navigatio
|
||||
}
|
||||
|
||||
function pop(state: NavigationState): NavigationState {
|
||||
if (state.index <= 0) {
|
||||
return state;
|
||||
}
|
||||
const lastChildren = state.routes;
|
||||
return {
|
||||
...state,
|
||||
|
||||
Reference in New Issue
Block a user