Sets up example for LegacyNavigator.
Summary:We'd plan to build the `NavigationLegacyNavigator` that is meant to replace Navigator seemlessly without API changes. While the APIs remain compatible with Navigator, it should be built with the new Navigation API such as `NavigationAnimatedView`...etc. To ensure that the new NavigationLegacyNavigagtor delivers the same UX and maintains APIs compability, we'd start with using the exact same examples as the same ones that Navigator uses. Reviewed By: ericvicenti Differential Revision: D2955273 fb-gh-sync-id: b4723cf54ea2258e5589f39dceeaee88be2b93f0 shipit-source-id: b4723cf54ea2258e5589f39dceeaee88be2b93f0
This commit is contained in:
Hedger Wang
facebook-github-bot-4
parent
45a52c72ff
commit
480e9abec5
|
|
@ -0,0 +1,164 @@
|
|||
/**
|
||||
* 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';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
NavigationExperimental,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
TouchableOpacity
|
||||
} = React;
|
||||
|
||||
var _getRandomRoute = function() {
|
||||
return {
|
||||
title: '#' + Math.ceil(Math.random() * 1000),
|
||||
};
|
||||
};
|
||||
|
||||
var Navigator = NavigationExperimental.LegacyNavigator;
|
||||
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.button}
|
||||
underlayColor="#B5B5B5"
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var BreadcrumbNavSample = React.createClass({
|
||||
|
||||
componentWillMount: function() {
|
||||
this._navBarRouteMapper = {
|
||||
rightContentForRoute: function(route, navigator) {
|
||||
return null;
|
||||
},
|
||||
titleContentForRoute: function(route, navigator) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => navigator.push(_getRandomRoute())}>
|
||||
<Text style={styles.titleText}>{route.title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
iconForRoute: function(route, navigator) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => { navigator.popToRoute(route); }}
|
||||
style={styles.crumbIconPlaceholder}
|
||||
/>
|
||||
);
|
||||
},
|
||||
separatorForRoute: function(route, navigator) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={navigator.pop}
|
||||
style={styles.crumbSeparatorPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
_renderScene: function(route, navigator) {
|
||||
return (
|
||||
<ScrollView style={styles.scene}>
|
||||
<NavButton
|
||||
onPress={() => { navigator.push(_getRandomRoute()); }}
|
||||
text="Push"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]); }}
|
||||
text="Reset w/ 2 scenes"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => { navigator.popToTop(); }}
|
||||
text="Pop to top"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => { navigator.replace(_getRandomRoute()); }}
|
||||
text="Replace"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => { this.props.navigator.pop(); }}
|
||||
text="Close breadcrumb example"
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<Navigator
|
||||
style={styles.container}
|
||||
initialRoute={_getRandomRoute()}
|
||||
renderScene={this._renderScene}
|
||||
navigationBar={
|
||||
<Navigator.BreadcrumbNavigationBar
|
||||
routeMapper={this._navBarRouteMapper}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
scene: {
|
||||
paddingTop: 50,
|
||||
flex: 1,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: '#CDCDCD',
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
container: {
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#dddddd',
|
||||
flex: 1,
|
||||
},
|
||||
titleText: {
|
||||
fontSize: 18,
|
||||
color: '#666666',
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 32,
|
||||
},
|
||||
crumbIconPlaceholder: {
|
||||
flex: 1,
|
||||
backgroundColor: '#666666',
|
||||
},
|
||||
crumbSeparatorPlaceholder: {
|
||||
flex: 1,
|
||||
backgroundColor: '#aaaaaa',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = BreadcrumbNavSample;
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
/**
|
||||
* 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';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
NavigationExperimental,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TabBarIOS,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var _getRandomRoute = function() {
|
||||
return {
|
||||
randNumber: Math.ceil(Math.random() * 1000),
|
||||
};
|
||||
};
|
||||
|
||||
var Navigator = NavigationExperimental.LegacyNavigator;
|
||||
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.button}
|
||||
underlayColor="#B5B5B5"
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var ROUTE_STACK = [
|
||||
_getRandomRoute(),
|
||||
_getRandomRoute(),
|
||||
_getRandomRoute(),
|
||||
];
|
||||
var INIT_ROUTE_INDEX = 1;
|
||||
|
||||
class JumpingNavBar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tabIndex: props.initTabIndex,
|
||||
};
|
||||
}
|
||||
handleWillFocus(route) {
|
||||
var tabIndex = ROUTE_STACK.indexOf(route);
|
||||
this.setState({ tabIndex, });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.tabs}>
|
||||
<TabBarIOS>
|
||||
<TabBarIOS.Item
|
||||
icon={require('image!tabnav_notification')}
|
||||
selected={this.state.tabIndex === 0}
|
||||
onPress={() => {
|
||||
this.props.onTabIndex(0);
|
||||
this.setState({ tabIndex: 0, });
|
||||
}}>
|
||||
<View />
|
||||
</TabBarIOS.Item>
|
||||
<TabBarIOS.Item
|
||||
icon={require('image!tabnav_list')}
|
||||
selected={this.state.tabIndex === 1}
|
||||
onPress={() => {
|
||||
this.props.onTabIndex(1);
|
||||
this.setState({ tabIndex: 1, });
|
||||
}}>
|
||||
<View />
|
||||
</TabBarIOS.Item>
|
||||
<TabBarIOS.Item
|
||||
icon={require('image!tabnav_settings')}
|
||||
selected={this.state.tabIndex === 2}
|
||||
onPress={() => {
|
||||
this.props.onTabIndex(2);
|
||||
this.setState({ tabIndex: 2, });
|
||||
}}>
|
||||
<View />
|
||||
</TabBarIOS.Item>
|
||||
</TabBarIOS>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var JumpingNavSample = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<Navigator
|
||||
debugOverlay={false}
|
||||
style={styles.appContainer}
|
||||
ref={(navigator) => {
|
||||
this._navigator = navigator;
|
||||
}}
|
||||
initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
|
||||
initialRouteStack={ROUTE_STACK}
|
||||
renderScene={this.renderScene}
|
||||
configureScene={() => ({
|
||||
...Navigator.SceneConfigs.HorizontalSwipeJump,
|
||||
})}
|
||||
navigationBar={
|
||||
<JumpingNavBar
|
||||
ref={(navBar) => { this.navBar = navBar; }}
|
||||
initTabIndex={INIT_ROUTE_INDEX}
|
||||
routeStack={ROUTE_STACK}
|
||||
onTabIndex={(index) => {
|
||||
this._navigator.jumpTo(ROUTE_STACK[index]);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
renderScene: function(route, navigator) {
|
||||
var backBtn;
|
||||
var forwardBtn;
|
||||
if (ROUTE_STACK.indexOf(route) !== 0) {
|
||||
backBtn = (
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
navigator.jumpBack();
|
||||
}}
|
||||
text="jumpBack"
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
|
||||
forwardBtn = (
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
navigator.jumpForward();
|
||||
}}
|
||||
text="jumpForward"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ScrollView style={styles.scene}>
|
||||
<Text style={styles.messageText}>#{route.randNumber}</Text>
|
||||
{backBtn}
|
||||
{forwardBtn}
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
navigator.jumpTo(ROUTE_STACK[1]);
|
||||
}}
|
||||
text="jumpTo middle route"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.pop();
|
||||
}}
|
||||
text="Exit Navigation Example"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({
|
||||
message: 'Came from jumping example',
|
||||
});
|
||||
}}
|
||||
text="Nav Menu"
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
button: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: '#CDCDCD',
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
appContainer: {
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#dddddd',
|
||||
flex: 1,
|
||||
},
|
||||
messageText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
padding: 15,
|
||||
marginTop: 50,
|
||||
marginLeft: 15,
|
||||
},
|
||||
scene: {
|
||||
flex: 1,
|
||||
paddingTop: 20,
|
||||
backgroundColor: '#EAEAEA',
|
||||
},
|
||||
tabs: {
|
||||
height: 50,
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = JumpingNavSample;
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
/**
|
||||
* 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';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
} = React;
|
||||
|
||||
var BreadcrumbNavSample = require('./BreadcrumbNavSample');
|
||||
var NavigationBarSample = require('./NavigationBarSample');
|
||||
var JumpingNavSample = require('./JumpingNavSample');
|
||||
|
||||
var Navigator = NavigationExperimental.LegacyNavigator;
|
||||
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.button}
|
||||
underlayColor="#B5B5B5"
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavMenu extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollView style={styles.scene}>
|
||||
<Text style={styles.messageText}>{this.props.message}</Text>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({
|
||||
message: 'Swipe right to dismiss',
|
||||
sceneConfig: Navigator.SceneConfigs.FloatFromRight,
|
||||
});
|
||||
}}
|
||||
text="Float in from right"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({
|
||||
message: 'Swipe down to dismiss',
|
||||
sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
|
||||
});
|
||||
}}
|
||||
text="Float in from bottom"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.pop();
|
||||
}}
|
||||
text="Pop"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.popToTop();
|
||||
}}
|
||||
text="Pop to top"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({ id: 'navbar' });
|
||||
}}
|
||||
text="Navbar Example"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({ id: 'jumping' });
|
||||
}}
|
||||
text="Jumping Example"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.push({ id: 'breadcrumbs' });
|
||||
}}
|
||||
text="Breadcrumbs Example"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.onExampleExit();
|
||||
}}
|
||||
text="Exit <LegacyNavigator> Example"
|
||||
/>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var TabBarExample = React.createClass({
|
||||
|
||||
statics: {
|
||||
title: '<LegacyNavigator> (Experimental)',
|
||||
description: 'Experimental navigator that ports the API of the current ' +
|
||||
'Navigator component',
|
||||
},
|
||||
|
||||
renderScene: function(route, nav) {
|
||||
switch (route.id) {
|
||||
case 'navbar':
|
||||
return <NavigationBarSample navigator={nav} />;
|
||||
case 'breadcrumbs':
|
||||
return <BreadcrumbNavSample navigator={nav} />;
|
||||
case 'jumping':
|
||||
return <JumpingNavSample navigator={nav} />;
|
||||
default:
|
||||
return (
|
||||
<NavMenu
|
||||
message={route.message}
|
||||
navigator={nav}
|
||||
onExampleExit={this.props.onExampleExit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<Navigator
|
||||
ref={this._setNavigatorRef}
|
||||
style={styles.container}
|
||||
initialRoute={{ message: 'First Scene', }}
|
||||
renderScene={this.renderScene}
|
||||
configureScene={(route) => {
|
||||
if (route.sceneConfig) {
|
||||
return route.sceneConfig;
|
||||
}
|
||||
return Navigator.SceneConfigs.FloatFromBottom;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
componentWillUnmount: function() {
|
||||
this._listeners && this._listeners.forEach(listener => listener.remove());
|
||||
},
|
||||
|
||||
_setNavigatorRef: function(navigator) {
|
||||
if (navigator !== this._navigator) {
|
||||
this._navigator = navigator;
|
||||
|
||||
if (navigator) {
|
||||
var callback = (event) => {
|
||||
console.log(
|
||||
`TabBarExample: event ${event.type}`,
|
||||
{
|
||||
route: JSON.stringify(event.data.route),
|
||||
target: event.target,
|
||||
type: event.type,
|
||||
}
|
||||
);
|
||||
};
|
||||
// Observe focus change events from the owner.
|
||||
this._listeners = [
|
||||
navigator.navigationContext.addListener('willfocus', callback),
|
||||
navigator.navigationContext.addListener('didfocus', callback),
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
messageText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
padding: 15,
|
||||
marginTop: 50,
|
||||
marginLeft: 15,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: '#CDCDCD',
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
scene: {
|
||||
flex: 1,
|
||||
paddingTop: 20,
|
||||
backgroundColor: '#ccc',
|
||||
}
|
||||
});
|
||||
|
||||
TabBarExample.external = true;
|
||||
|
||||
module.exports = TabBarExample;
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
/**
|
||||
* 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';
|
||||
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
NavigationExperimental,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
TouchableOpacity,
|
||||
} = React;
|
||||
|
||||
var cssVar = require('cssVar');
|
||||
|
||||
var Navigator = NavigationExperimental.LegacyNavigator;
|
||||
|
||||
class NavButton extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
style={styles.button}
|
||||
underlayColor="#B5B5B5"
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var NavigationBarRouteMapper = {
|
||||
|
||||
LeftButton: function(route, navigator, index, navState) {
|
||||
if (index === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var previousRoute = navState.routeStack[index - 1];
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => navigator.pop()}
|
||||
style={styles.navBarLeftButton}>
|
||||
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
||||
{previousRoute.title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
|
||||
RightButton: function(route, navigator, index, navState) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => navigator.push(newRandomRoute())}
|
||||
style={styles.navBarRightButton}>
|
||||
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
||||
Next
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
},
|
||||
|
||||
Title: function(route, navigator, index, navState) {
|
||||
return (
|
||||
<Text style={[styles.navBarText, styles.navBarTitleText]}>
|
||||
{route.title} [{index}]
|
||||
</Text>
|
||||
);
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
function newRandomRoute() {
|
||||
return {
|
||||
title: '#' + Math.ceil(Math.random() * 1000),
|
||||
};
|
||||
}
|
||||
|
||||
var NavigationBarSample = React.createClass({
|
||||
|
||||
componentWillMount: function() {
|
||||
var navigator = this.props.navigator;
|
||||
|
||||
var callback = (event) => {
|
||||
console.log(
|
||||
`NavigationBarSample : event ${event.type}`,
|
||||
{
|
||||
route: JSON.stringify(event.data.route),
|
||||
target: event.target,
|
||||
type: event.type,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Observe focus change events from this component.
|
||||
this._listeners = [
|
||||
navigator.navigationContext.addListener('willfocus', callback),
|
||||
navigator.navigationContext.addListener('didfocus', callback),
|
||||
];
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
this._listeners && this._listeners.forEach(listener => listener.remove());
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<Navigator
|
||||
debugOverlay={false}
|
||||
style={styles.appContainer}
|
||||
initialRoute={newRandomRoute()}
|
||||
renderScene={(route, navigator) => (
|
||||
<ScrollView style={styles.scene}>
|
||||
<Text style={styles.messageText}>{route.content}</Text>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
navigator.immediatelyResetRouteStack([
|
||||
newRandomRoute(),
|
||||
newRandomRoute(),
|
||||
newRandomRoute(),
|
||||
]);
|
||||
}}
|
||||
text="Reset w/ 3 scenes"
|
||||
/>
|
||||
<NavButton
|
||||
onPress={() => {
|
||||
this.props.navigator.pop();
|
||||
}}
|
||||
text="Exit NavigationBar Example"
|
||||
/>
|
||||
</ScrollView>
|
||||
)}
|
||||
navigationBar={
|
||||
<Navigator.NavigationBar
|
||||
routeMapper={NavigationBarRouteMapper}
|
||||
style={styles.navBar}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
messageText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
padding: 15,
|
||||
marginTop: 50,
|
||||
marginLeft: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: 'white',
|
||||
padding: 15,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: '#CDCDCD',
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
navBar: {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
navBarText: {
|
||||
fontSize: 16,
|
||||
marginVertical: 10,
|
||||
},
|
||||
navBarTitleText: {
|
||||
color: cssVar('fbui-bluegray-60'),
|
||||
fontWeight: '500',
|
||||
marginVertical: 9,
|
||||
},
|
||||
navBarLeftButton: {
|
||||
paddingLeft: 10,
|
||||
},
|
||||
navBarRightButton: {
|
||||
paddingRight: 10,
|
||||
},
|
||||
navBarButtonText: {
|
||||
color: cssVar('fbui-accent-blue'),
|
||||
},
|
||||
scene: {
|
||||
flex: 1,
|
||||
paddingTop: 20,
|
||||
backgroundColor: '#EAEAEA',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = NavigationBarSample;
|
||||
|
|
@ -36,7 +36,7 @@ var EXAMPLES = {
|
|||
'Tic Tac Toe': require('./NavigationTicTacToeExample'),
|
||||
};
|
||||
|
||||
var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
|
||||
var EXAMPLE_STORAGE_KEY = 'xNavigationExperimentalExample';
|
||||
|
||||
var NavigationExperimentalExample = React.createClass({
|
||||
statics: {
|
||||
|
|
|
|||
|
|
@ -200,6 +200,10 @@ var APIExamples: Array<UIExplorerExample> = [
|
|||
key: 'NavigationExperimentalExample',
|
||||
module: require('./NavigationExperimental/NavigationExperimentalExample'),
|
||||
},
|
||||
{
|
||||
key: 'NavigationExperimentalLegacyNavigatorExample',
|
||||
module: require('./NavigationExperimental/LegacyNavigator/LegacyNavigatorExample'),
|
||||
},
|
||||
{
|
||||
key: 'NetInfoExample',
|
||||
module: require('./NetInfoExample'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* Copyright (c) 2015, Facebook, Inc. All rights reserved.
|
||||
*
|
||||
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
|
||||
* all intellectual property and other proprietary rights, in and to the React
|
||||
* Native CustomComponents software (the "Software"). Subject to your
|
||||
* compliance with these terms, you are hereby granted a non-exclusive,
|
||||
* worldwide, royalty-free copyright license to (1) use and copy the Software;
|
||||
* and (2) reproduce and distribute the Software as part of your own software
|
||||
* ("Your Software"). Facebook reserves all rights not expressly granted to
|
||||
* you in this license agreement.
|
||||
*
|
||||
* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
|
||||
* OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
||||
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
|
||||
* IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
|
||||
* EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
|
||||
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
|
||||
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
|
||||
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
|
||||
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* @providesModule NavigationLegacyNavigator
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* NavigationLegacyNavigator is meant to replace Navigator seemlessly without
|
||||
* API changes. While the APIs remain compatible with Navigator, it should
|
||||
* be built with the new Navigation API such as `NavigationAnimatedView`...etc.
|
||||
*/
|
||||
const NavigationLegacyNavigator = require('Navigator');
|
||||
|
||||
module.exports = NavigationLegacyNavigator;
|
||||
|
|
@ -16,6 +16,7 @@ const NavigationCard = require('NavigationCard');
|
|||
const NavigationCardStack = require('NavigationCardStack');
|
||||
const NavigationContainer = require('NavigationContainer');
|
||||
const NavigationHeader = require('NavigationHeader');
|
||||
const NavigationLegacyNavigator = require('NavigationLegacyNavigator');
|
||||
const NavigationReducer = require('NavigationReducer');
|
||||
const NavigationRootContainer = require('NavigationRootContainer');
|
||||
const NavigationStateUtils = require('NavigationStateUtils');
|
||||
|
|
@ -35,9 +36,10 @@ const NavigationExperimental = {
|
|||
AnimatedView: NavigationAnimatedView,
|
||||
|
||||
// CustomComponents:
|
||||
Header: NavigationHeader,
|
||||
Card: NavigationCard,
|
||||
CardStack: NavigationCardStack,
|
||||
Header: NavigationHeader,
|
||||
LegacyNavigator: NavigationLegacyNavigator,
|
||||
};
|
||||
|
||||
module.exports = NavigationExperimental;
|
||||
|
|
|
|||
Loading…
Reference in New Issue