status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-25 15:45:32 +00:00
Code Issues Projects Releases Wiki Activity

[ReactNative] Navigator Example Overhaul

Browse Source
This commit is contained in:
Eric Vicenti 2015-03-26 06:08:03 -07:00
parent 293b9b9a7f
commit 2448946a7e
4 changed files with 407 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
View File

@ -10,245 +10,133 @@
var React = require('react-native');
var {
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
TabBarIOS,
ScrollView,
Text,
View,
TouchableHighlight,
TouchableOpacity,
View,
} = React;
var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
var _getRandomRoute = function() {
return {
backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
content:
SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
title: Math.random() > 0.5 ? 'Hello' : 'There',
rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
title: '#' + Math.ceil(Math.random() * 1000),
};
};
var SampleNavigationBarRouteMapper = {
rightContentForRoute: function(route, navigator) {
if (route.rightButtonTitle) {
class NavButton extends React.Component {
render() {
return (
<Text style={[styles.titleText, styles.filterText]}>
{route.rightButtonTitle}
</Text>
<TouchableHighlight
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
} else {
return null;
}
}
var BreadcrumbNavSample = React.createClass({
componentWillMount: function() {
this._navBarRouteMapper = {
rightContentForRoute: function(route, navigator) {
return null;
},
titleContentForRoute: function(route, navigator) {
return (
<TouchableHighlight
<TouchableOpacity
onPress={() => navigator.push(_getRandomRoute())}>
<View>
<Text style={styles.titleText}>{route.title}</Text>
</View>
</TouchableHighlight>
</TouchableOpacity>
);
},
iconForRoute: function(route, navigator) {
var onPress =
navigator.popToRoute.bind(navigator, route);
return (
<TouchableHighlight onPress={onPress}>
<TouchableOpacity onPress={() => {
navigator.popToRoute(route);
}}>
<View style={styles.crumbIconPlaceholder} />
</TouchableHighlight>
</TouchableOpacity>
);
},
separatorForRoute: function(route, navigator) {
return (
<TouchableHighlight onPress={navigator.pop}>
<TouchableOpacity onPress={navigator.pop}>
<View style={styles.crumbSeparatorPlaceholder} />
</TouchableHighlight>
</TouchableOpacity>
);
}
};
},
var _delay = 400; // Just to test for race conditions with native nav.
var renderScene = function(route, navigator) {
var content = route.content;
_renderScene: function(route, navigator) {
return (
<ScrollView>
<View style={styles.scene}>
<TouchableHighlight
onPress={_pushRouteLater(navigator.push)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request push soon</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_popRouteLater(navigator.pop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request pop soon</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={
_immediatelySetTwoItemsLater(
navigator.immediatelyResetRouteStack
)
}>
<View style={styles.button}>
<Text style={styles.buttonText}>Immediate set two routes</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_popToTopLater(navigator.popToTop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>pop to top soon</Text>
</View>
</TouchableHighlight>
</View>
<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>
);
};
var _popToTopLater = function(popToTop) {
return () => setTimeout(popToTop, _delay);
};
var _pushRouteLater = function(push) {
return () => setTimeout(
() => push(_getRandomRoute()),
_delay
);
};
var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
return () => setTimeout(
() => immediatelyResetRouteStack([
_getRandomRoute(),
_getRandomRoute(),
])
);
};
var _popRouteLater = function(pop) {
return () => setTimeout(pop, _delay);
};
var BreadcrumbNavSample = React.createClass({
getInitialState: function() {
return {
selectedTab: 0,
};
},
render: function() {
var initialRoute = {
backButtonTitle: 'Start', // no back button for initial scene
content: SAMPLE_TEXT,
title: 'Campaigns',
rightButtonTitle: 'Filter',
};
return (
<TabBarIOS>
<TabBarIOS.Item
selected={this.state.selectedTab === 0}
onPress={this.onTabSelect.bind(this, 0)}
icon={require('image!tabnav_list')}
title="One">
<Navigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
renderScene={renderScene}
style={styles.container}
initialRoute={_getRandomRoute()}
renderScene={this._renderScene}
navigationBar={
<Navigator.BreadcrumbNavigationBar
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
navigationBarRouteMapper={this._navBarRouteMapper}
/>
}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 1}
onPress={this.onTabSelect.bind(this, 1)}
icon={require('image!tabnav_notification')}
title="Two">
<Navigator
configureScene={() => Navigator.SceneConfigs.FloatFromBottom}
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
renderScene={renderScene}
navigationBar={
<Navigator.BreadcrumbNavigationBar
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
/>
}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
},
onTabSelect: function(tab, event) {
if (this.state.selectedTab !== tab) {
this.setState({selectedTab: tab});
}
},
});
var styles = StyleSheet.create({
navigationItem: {
backgroundColor: '#eeeeee',
},
scene: {
paddingTop: 50,
flex: 1,
},
button: {
backgroundColor: '#cccccc',
margin: 50,
marginTop: 26,
padding: 10,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 12,
textAlign: 'center',
fontSize: 17,
fontWeight: '500',
},
appContainer: {
container: {
overflow: 'hidden',
backgroundColor: '#dddddd',
flex: 1,
@ -257,13 +145,9 @@ var styles = StyleSheet.create({
fontSize: 18,
color: '#666666',
textAlign: 'center',
fontWeight: '500',
fontWeight: 'bold',
lineHeight: 32,
},
filterText: {
color: '#5577ff',
},
// TODO: Accept icons from route.
crumbIconPlaceholder: {
flex: 1,
backgroundColor: '#666666',

266
Examples/UIExplorer/Navigator/JumpingNavSample.js
View File

@ -11,8 +11,10 @@
var React = require('react-native');
var {
Navigator,
PixelRatio,
StyleSheet,
ScrollView,
TabBarIOS,
Text,
TouchableHighlight,
View,
@ -20,178 +22,186 @@ var {
var _getRandomRoute = function() {
return {
randNumber: Math.random(),
randNumber: Math.ceil(Math.random() * 1000),
};
};
var INIT_ROUTE = _getRandomRoute();
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(),
INIT_ROUTE,
_getRandomRoute(),
_getRandomRoute(),
];
var renderScene = function(route, navigator) {
return (
<ScrollView style={styles.scene}>
<View style={styles.scroll}>
<Text>{route.randNumber}</Text>
<TouchableHighlight
onPress={() => {
navigator.jumpBack();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpBack</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.jumpForward();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpForward</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.jumpTo(INIT_ROUTE);
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpTo initial route</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.push(_getRandomRoute());
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: push</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.replace(_getRandomRoute());
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: replace</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.pop();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: pop</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.immediatelyResetRouteStack([
_getRandomRoute(),
_getRandomRoute(),
]);
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: Immediate set two routes</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigator.popToTop();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: pop to top</Text>
</View>
</TouchableHighlight>
</View>
</ScrollView>
);
};
var INIT_ROUTE_INDEX = 1;
class JumpingNavBar extends React.Component {
render() {
return (
<View style={styles.navBar}>
{this.props.routeStack.map((route, index) => (
<TouchableHighlight onPress={() => {
this.props.navigator.jumpTo(route);
}}>
<View style={styles.navButton}>
<Text
style={[
styles.navButtonText,
this.props.navState.toIndex === index && styles.navButtonActive
]}>
{index}
</Text>
</View>
</TouchableHighlight>
))}
<View style={styles.tabs}>
<TabBarIOS
selectedTab={'tab_' + this.props.tabIndex}>
<TabBarIOS.Item
name="tab_0"
icon={require('image!tabnav_notification')}
selected={this.props.tabIndex === 0}
onPress={() => { this.props.onTabIndex(0); }}
children={<View />}
/>
<TabBarIOS.Item
name="tab_1"
icon={require('image!tabnav_list')}
selected={this.props.tabIndex === 1}
onPress={() => { this.props.onTabIndex(1); }}
children={<View />}
/>
<TabBarIOS.Item
name="tab_2"
icon={require('image!tabnav_settings')}
selected={this.props.tabIndex === 2}
onPress={() => { this.props.onTabIndex(2); }}
children={<View />}
/>
</TabBarIOS>
</View>
);
}
}
var JumpingNavSample = React.createClass({
getInitialState: function() {
return {
tabIndex: INIT_ROUTE_INDEX,
};
},
render: function() {
return (
<Navigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={INIT_ROUTE}
style={styles.appContainer}
ref={(navigator) => {
this._navigator = navigator;
}}
initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
initialRouteStack={ROUTE_STACK}
renderScene={renderScene}
navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
renderScene={this.renderScene}
navigationBar={
<JumpingNavBar
routeStack={ROUTE_STACK}
tabIndex={this.state.tabIndex}
onTabIndex={(index) => {
this.setState({ tabIndex: index }, () => {
this._navigator.jumpTo(ROUTE_STACK[index]);
});
}}
/>
}
onWillFocus={(route) => {
this.setState({
tabIndex: ROUTE_STACK.indexOf(route),
});
}}
shouldJumpOnBackstackPop={true}
/>
);
},
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({
scene: {
backgroundColor: '#eeeeee',
},
scroll: {
flex: 1,
},
button: {
backgroundColor: '#cccccc',
margin: 50,
marginTop: 26,
padding: 10,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 12,
textAlign: 'center',
fontSize: 17,
fontWeight: '500',
},
appContainer: {
overflow: 'hidden',
backgroundColor: '#dddddd',
flex: 1,
},
navBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 90,
flexDirection: 'row',
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
navButton: {
scene: {
flex: 1,
paddingTop: 20,
backgroundColor: '#EAEAEA',
},
navButtonText: {
textAlign: 'center',
fontSize: 32,
marginTop: 25,
},
navButtonActive: {
color: 'green',
},
tabs: {
height: 50,
}
});
module.exports = JumpingNavSample;

92
Examples/UIExplorer/Navigator/NavigationBarSample.js
View File

@ -11,15 +11,30 @@
var React = require('react-native');
var {
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
} = React;
var cssVar = require('cssVar');
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 = {
@ -30,26 +45,27 @@ var NavigationBarRouteMapper = {
var previousRoute = navState.routeStack[index - 1];
return (
<TouchableHighlight onPress={() => navigator.pop()}>
<View>
<TouchableOpacity
onPress={() => navigator.pop()}>
<View style={styles.navBarLeftButton}>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
{previousRoute.title}
</Text>
</View>
</TouchableHighlight>
</TouchableOpacity>
);
},
RightButton: function(route, navigator, index, navState) {
return (
<TouchableHighlight
<TouchableOpacity
onPress={() => navigator.push(newRandomRoute())}>
<View>
<View style={styles.navBarRightButton}>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
Next
</Text>
</View>
</TouchableHighlight>
</TouchableOpacity>
);
},
@ -65,8 +81,7 @@ var NavigationBarRouteMapper = {
function newRandomRoute() {
return {
content: 'Hello World!',
title: 'Random ' + Math.round(Math.random() * 100),
title: '#' + Math.ceil(Math.random() * 1000),
};
}
@ -74,37 +89,63 @@ var NavigationBarSample = React.createClass({
render: function() {
return (
<View style={styles.appContainer}>
<Navigator
debugOverlay={false}
style={styles.appContainer}
initialRoute={newRandomRoute()}
renderScene={(route, navigator) => (
<View style={styles.scene}>
<Text>{route.content}</Text>
</View>
<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
navigationBarRouteMapper={NavigationBarRouteMapper}
navigationBarStyles={styles.navBar}
/>
}
/>
</View>
);
},
});
var styles = StyleSheet.create({
appContainer: {
overflow: 'hidden',
backgroundColor: '#ffffff',
flex: 1,
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
scene: {
paddingTop: 50,
flex: 1,
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 17,
fontWeight: '500',
},
navBar: {
backgroundColor: 'white',
},
navBarText: {
fontSize: 16,
@ -115,9 +156,20 @@ var styles = StyleSheet.create({
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;

121
Examples/UIExplorer/Navigator/NavigatorExample.js
View File

@ -11,6 +11,7 @@
var React = require('react-native');
var {
Navigator,
PixelRatio,
ScrollView,
StyleSheet,
Text,
@ -20,30 +21,78 @@ var BreadcrumbNavSample = require('./BreadcrumbNavSample');
var NavigationBarSample = require('./NavigationBarSample');
var JumpingNavSample = require('./JumpingNavSample');
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}>
<TouchableHighlight style={styles.button} onPress={() => {
this.props.navigator.push({ id: 'breadcrumbs' });
}}>
<Text style={styles.buttonText}>Breadcrumbs Example</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={() => {
<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 style={styles.buttonText}>Navbar Example</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={() => {
}}
text="Navbar Example"
/>
<NavButton
onPress={() => {
this.props.navigator.push({ id: 'jumping' });
}}>
<Text style={styles.buttonText}>Jumping Example</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={() => {
}}
text="Jumping Example"
/>
<NavButton
onPress={() => {
this.props.navigator.push({ id: 'breadcrumbs' });
}}
text="Breadcrumbs Example"
/>
<NavButton
onPress={() => {
this.props.onExampleExit();
}}>
<Text style={styles.buttonText}>Exit Navigator Example</Text>
</TouchableHighlight>
}}
text="Exit <Navigator> Example"
/>
</ScrollView>
);
}
@ -58,19 +107,20 @@ var TabBarExample = React.createClass({
renderScene: function(route, nav) {
switch (route.id) {
case 'menu':
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}
/>
);
case 'navbar':
return <NavigationBarSample />;
case 'breadcrumbs':
return <BreadcrumbNavSample />;
case 'jumping':
return <JumpingNavSample />;
}
},
@ -78,9 +128,14 @@ var TabBarExample = React.createClass({
return (
<Navigator
style={styles.container}
initialRoute={{ id: 'menu', }}
initialRoute={{ message: "First Scene", }}
renderScene={this.renderScene}
configureScene={(route) => Navigator.SceneConfigs.FloatFromBottom}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromBottom;
}}
/>
);
},
@ -88,18 +143,30 @@ var TabBarExample = React.createClass({
});
var styles = StyleSheet.create({
messageText: {
fontSize: 17,
fontWeight: '500',
padding: 15,
marginTop: 50,
marginLeft: 15,
},
container: {
flex: 1,
},
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 17,
fontWeight: '500',
},
scene: {
flex: 1,
paddingTop: 64,
paddingTop: 20,
backgroundColor: '#EAEAEA',
}
});