[ReactNative] Navigator Example Overhaul
This commit is contained in:
Родитель
293b9b9a7f
Коммит
2448946a7e
|
@ -10,245 +10,133 @@
|
||||||
|
|
||||||
var React = require('react-native');
|
var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
|
PixelRatio,
|
||||||
Navigator,
|
Navigator,
|
||||||
ScrollView,
|
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
TabBarIOS,
|
ScrollView,
|
||||||
Text,
|
Text,
|
||||||
View,
|
|
||||||
TouchableHighlight,
|
TouchableHighlight,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
|
||||||
var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
|
|
||||||
|
|
||||||
var _getRandomRoute = function() {
|
var _getRandomRoute = function() {
|
||||||
return {
|
return {
|
||||||
backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
|
title: '#' + Math.ceil(Math.random() * 1000),
|
||||||
content:
|
|
||||||
SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
|
|
||||||
title: Math.random() > 0.5 ? 'Hello' : 'There',
|
|
||||||
rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
class NavButton extends React.Component {
|
||||||
var SampleNavigationBarRouteMapper = {
|
render() {
|
||||||
rightContentForRoute: function(route, navigator) {
|
|
||||||
if (route.rightButtonTitle) {
|
|
||||||
return (
|
|
||||||
<Text style={[styles.titleText, styles.filterText]}>
|
|
||||||
{route.rightButtonTitle}
|
|
||||||
</Text>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
titleContentForRoute: function(route, navigator) {
|
|
||||||
return (
|
return (
|
||||||
<TouchableHighlight
|
<TouchableHighlight
|
||||||
onPress={() => navigator.push(_getRandomRoute())}>
|
style={styles.button}
|
||||||
<View>
|
underlayColor="#B5B5B5"
|
||||||
<Text style={styles.titleText}>{route.title}</Text>
|
onPress={this.props.onPress}>
|
||||||
</View>
|
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||||
</TouchableHighlight>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
iconForRoute: function(route, navigator) {
|
|
||||||
var onPress =
|
|
||||||
navigator.popToRoute.bind(navigator, route);
|
|
||||||
return (
|
|
||||||
<TouchableHighlight onPress={onPress}>
|
|
||||||
<View style={styles.crumbIconPlaceholder} />
|
|
||||||
</TouchableHighlight>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
separatorForRoute: function(route, navigator) {
|
|
||||||
return (
|
|
||||||
<TouchableHighlight onPress={navigator.pop}>
|
|
||||||
<View style={styles.crumbSeparatorPlaceholder} />
|
|
||||||
</TouchableHighlight>
|
</TouchableHighlight>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
var _delay = 400; // Just to test for race conditions with native nav.
|
|
||||||
|
|
||||||
var renderScene = function(route, navigator) {
|
|
||||||
var content = route.content;
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
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({
|
var BreadcrumbNavSample = React.createClass({
|
||||||
|
|
||||||
getInitialState: function() {
|
componentWillMount: function() {
|
||||||
return {
|
this._navBarRouteMapper = {
|
||||||
selectedTab: 0,
|
rightContentForRoute: function(route, navigator) {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
titleContentForRoute: function(route, navigator) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => navigator.push(_getRandomRoute())}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.titleText}>{route.title}</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
iconForRoute: function(route, navigator) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity onPress={() => {
|
||||||
|
navigator.popToRoute(route);
|
||||||
|
}}>
|
||||||
|
<View style={styles.crumbIconPlaceholder} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
separatorForRoute: function(route, navigator) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity onPress={navigator.pop}>
|
||||||
|
<View style={styles.crumbSeparatorPlaceholder} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
_renderScene: function(route, navigator) {
|
||||||
var initialRoute = {
|
|
||||||
backButtonTitle: 'Start', // no back button for initial scene
|
|
||||||
content: SAMPLE_TEXT,
|
|
||||||
title: 'Campaigns',
|
|
||||||
rightButtonTitle: 'Filter',
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<TabBarIOS>
|
<ScrollView style={styles.scene}>
|
||||||
<TabBarIOS.Item
|
<NavButton
|
||||||
selected={this.state.selectedTab === 0}
|
onPress={() => { navigator.push(_getRandomRoute()) }}
|
||||||
onPress={this.onTabSelect.bind(this, 0)}
|
text="Push"
|
||||||
icon={require('image!tabnav_list')}
|
/>
|
||||||
title="One">
|
<NavButton
|
||||||
<Navigator
|
onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]) }}
|
||||||
debugOverlay={false}
|
text="Reset w/ 2 scenes"
|
||||||
style={[styles.appContainer]}
|
/>
|
||||||
initialRoute={initialRoute}
|
<NavButton
|
||||||
renderScene={renderScene}
|
onPress={() => { navigator.popToTop() }}
|
||||||
navigationBar={
|
text="Pop to top"
|
||||||
<Navigator.BreadcrumbNavigationBar
|
/>
|
||||||
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
|
<NavButton
|
||||||
/>
|
onPress={() => { navigator.replace(_getRandomRoute()) }}
|
||||||
}
|
text="Replace"
|
||||||
/>
|
/>
|
||||||
</TabBarIOS.Item>
|
<NavButton
|
||||||
<TabBarIOS.Item
|
onPress={() => { this.props.navigator.pop(); }}
|
||||||
selected={this.state.selectedTab === 1}
|
text="Close breadcrumb example"
|
||||||
onPress={this.onTabSelect.bind(this, 1)}
|
/>
|
||||||
icon={require('image!tabnav_notification')}
|
</ScrollView>
|
||||||
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) {
|
render: function() {
|
||||||
if (this.state.selectedTab !== tab) {
|
return (
|
||||||
this.setState({selectedTab: tab});
|
<Navigator
|
||||||
}
|
style={styles.container}
|
||||||
|
initialRoute={_getRandomRoute()}
|
||||||
|
renderScene={this._renderScene}
|
||||||
|
navigationBar={
|
||||||
|
<Navigator.BreadcrumbNavigationBar
|
||||||
|
navigationBarRouteMapper={this._navBarRouteMapper}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
navigationItem: {
|
|
||||||
backgroundColor: '#eeeeee',
|
|
||||||
},
|
|
||||||
scene: {
|
scene: {
|
||||||
paddingTop: 50,
|
paddingTop: 50,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
backgroundColor: '#cccccc',
|
backgroundColor: 'white',
|
||||||
margin: 50,
|
padding: 15,
|
||||||
marginTop: 26,
|
borderBottomWidth: 1 / PixelRatio.get(),
|
||||||
padding: 10,
|
borderBottomColor: '#CDCDCD',
|
||||||
},
|
},
|
||||||
buttonText: {
|
buttonText: {
|
||||||
fontSize: 12,
|
fontSize: 17,
|
||||||
textAlign: 'center',
|
fontWeight: '500',
|
||||||
},
|
},
|
||||||
appContainer: {
|
container: {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
backgroundColor: '#dddddd',
|
backgroundColor: '#dddddd',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
@ -257,13 +145,9 @@ var styles = StyleSheet.create({
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
color: '#666666',
|
color: '#666666',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fontWeight: '500',
|
fontWeight: 'bold',
|
||||||
lineHeight: 32,
|
lineHeight: 32,
|
||||||
},
|
},
|
||||||
filterText: {
|
|
||||||
color: '#5577ff',
|
|
||||||
},
|
|
||||||
// TODO: Accept icons from route.
|
|
||||||
crumbIconPlaceholder: {
|
crumbIconPlaceholder: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: '#666666',
|
backgroundColor: '#666666',
|
||||||
|
|
|
@ -11,8 +11,10 @@
|
||||||
var React = require('react-native');
|
var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
Navigator,
|
Navigator,
|
||||||
|
PixelRatio,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
ScrollView,
|
ScrollView,
|
||||||
|
TabBarIOS,
|
||||||
Text,
|
Text,
|
||||||
TouchableHighlight,
|
TouchableHighlight,
|
||||||
View,
|
View,
|
||||||
|
@ -20,178 +22,186 @@ var {
|
||||||
|
|
||||||
var _getRandomRoute = function() {
|
var _getRandomRoute = function() {
|
||||||
return {
|
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 = [
|
var ROUTE_STACK = [
|
||||||
_getRandomRoute(),
|
_getRandomRoute(),
|
||||||
_getRandomRoute(),
|
_getRandomRoute(),
|
||||||
INIT_ROUTE,
|
|
||||||
_getRandomRoute(),
|
|
||||||
_getRandomRoute(),
|
_getRandomRoute(),
|
||||||
];
|
];
|
||||||
var renderScene = function(route, navigator) {
|
var INIT_ROUTE_INDEX = 1;
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
class JumpingNavBar extends React.Component {
|
class JumpingNavBar extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.navBar}>
|
<View style={styles.tabs}>
|
||||||
{this.props.routeStack.map((route, index) => (
|
<TabBarIOS
|
||||||
<TouchableHighlight onPress={() => {
|
selectedTab={'tab_' + this.props.tabIndex}>
|
||||||
this.props.navigator.jumpTo(route);
|
<TabBarIOS.Item
|
||||||
}}>
|
name="tab_0"
|
||||||
<View style={styles.navButton}>
|
icon={require('image!tabnav_notification')}
|
||||||
<Text
|
selected={this.props.tabIndex === 0}
|
||||||
style={[
|
onPress={() => { this.props.onTabIndex(0); }}
|
||||||
styles.navButtonText,
|
children={<View />}
|
||||||
this.props.navState.toIndex === index && styles.navButtonActive
|
/>
|
||||||
]}>
|
<TabBarIOS.Item
|
||||||
{index}
|
name="tab_1"
|
||||||
</Text>
|
icon={require('image!tabnav_list')}
|
||||||
</View>
|
selected={this.props.tabIndex === 1}
|
||||||
</TouchableHighlight>
|
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>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var JumpingNavSample = React.createClass({
|
var JumpingNavSample = React.createClass({
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
tabIndex: INIT_ROUTE_INDEX,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<Navigator
|
<Navigator
|
||||||
debugOverlay={false}
|
debugOverlay={false}
|
||||||
style={[styles.appContainer]}
|
style={styles.appContainer}
|
||||||
initialRoute={INIT_ROUTE}
|
ref={(navigator) => {
|
||||||
|
this._navigator = navigator;
|
||||||
|
}}
|
||||||
|
initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
|
||||||
initialRouteStack={ROUTE_STACK}
|
initialRouteStack={ROUTE_STACK}
|
||||||
renderScene={renderScene}
|
renderScene={this.renderScene}
|
||||||
navigationBar={<JumpingNavBar routeStack={ROUTE_STACK} />}
|
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}
|
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({
|
var styles = StyleSheet.create({
|
||||||
scene: {
|
|
||||||
backgroundColor: '#eeeeee',
|
|
||||||
},
|
|
||||||
scroll: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
button: {
|
button: {
|
||||||
backgroundColor: '#cccccc',
|
backgroundColor: 'white',
|
||||||
margin: 50,
|
padding: 15,
|
||||||
marginTop: 26,
|
borderBottomWidth: 1 / PixelRatio.get(),
|
||||||
padding: 10,
|
borderBottomColor: '#CDCDCD',
|
||||||
},
|
},
|
||||||
buttonText: {
|
buttonText: {
|
||||||
fontSize: 12,
|
fontSize: 17,
|
||||||
textAlign: 'center',
|
fontWeight: '500',
|
||||||
},
|
},
|
||||||
appContainer: {
|
appContainer: {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
backgroundColor: '#dddddd',
|
backgroundColor: '#dddddd',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
navBar: {
|
messageText: {
|
||||||
position: 'absolute',
|
fontSize: 17,
|
||||||
bottom: 0,
|
fontWeight: '500',
|
||||||
left: 0,
|
padding: 15,
|
||||||
right: 0,
|
marginTop: 50,
|
||||||
height: 90,
|
marginLeft: 15,
|
||||||
flexDirection: 'row',
|
|
||||||
},
|
},
|
||||||
navButton: {
|
scene: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
paddingTop: 20,
|
||||||
|
backgroundColor: '#EAEAEA',
|
||||||
},
|
},
|
||||||
navButtonText: {
|
tabs: {
|
||||||
textAlign: 'center',
|
height: 50,
|
||||||
fontSize: 32,
|
}
|
||||||
marginTop: 25,
|
|
||||||
},
|
|
||||||
navButtonActive: {
|
|
||||||
color: 'green',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = JumpingNavSample;
|
module.exports = JumpingNavSample;
|
||||||
|
|
|
@ -11,15 +11,30 @@
|
||||||
|
|
||||||
var React = require('react-native');
|
var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
|
PixelRatio,
|
||||||
Navigator,
|
Navigator,
|
||||||
|
ScrollView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
TouchableHighlight,
|
TouchableHighlight,
|
||||||
|
TouchableOpacity,
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
|
||||||
var cssVar = require('cssVar');
|
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 = {
|
var NavigationBarRouteMapper = {
|
||||||
|
|
||||||
|
@ -30,26 +45,27 @@ var NavigationBarRouteMapper = {
|
||||||
|
|
||||||
var previousRoute = navState.routeStack[index - 1];
|
var previousRoute = navState.routeStack[index - 1];
|
||||||
return (
|
return (
|
||||||
<TouchableHighlight onPress={() => navigator.pop()}>
|
<TouchableOpacity
|
||||||
<View>
|
onPress={() => navigator.pop()}>
|
||||||
|
<View style={styles.navBarLeftButton}>
|
||||||
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
||||||
{previousRoute.title}
|
{previousRoute.title}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableHighlight>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
RightButton: function(route, navigator, index, navState) {
|
RightButton: function(route, navigator, index, navState) {
|
||||||
return (
|
return (
|
||||||
<TouchableHighlight
|
<TouchableOpacity
|
||||||
onPress={() => navigator.push(newRandomRoute())}>
|
onPress={() => navigator.push(newRandomRoute())}>
|
||||||
<View>
|
<View style={styles.navBarRightButton}>
|
||||||
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
<Text style={[styles.navBarText, styles.navBarButtonText]}>
|
||||||
Next
|
Next
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableHighlight>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -65,8 +81,7 @@ var NavigationBarRouteMapper = {
|
||||||
|
|
||||||
function newRandomRoute() {
|
function newRandomRoute() {
|
||||||
return {
|
return {
|
||||||
content: 'Hello World!',
|
title: '#' + Math.ceil(Math.random() * 1000),
|
||||||
title: 'Random ' + Math.round(Math.random() * 100),
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,37 +89,63 @@ var NavigationBarSample = React.createClass({
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.appContainer}>
|
<Navigator
|
||||||
<Navigator
|
debugOverlay={false}
|
||||||
debugOverlay={false}
|
style={styles.appContainer}
|
||||||
style={styles.appContainer}
|
initialRoute={newRandomRoute()}
|
||||||
initialRoute={newRandomRoute()}
|
renderScene={(route, navigator) => (
|
||||||
renderScene={(route, navigator) => (
|
<ScrollView style={styles.scene}>
|
||||||
<View style={styles.scene}>
|
<Text style={styles.messageText}>{route.content}</Text>
|
||||||
<Text>{route.content}</Text>
|
<NavButton
|
||||||
</View>
|
onPress={() => {
|
||||||
)}
|
navigator.immediatelyResetRouteStack([
|
||||||
navigationBar={
|
newRandomRoute(),
|
||||||
<Navigator.NavigationBar
|
newRandomRoute(),
|
||||||
navigationBarRouteMapper={NavigationBarRouteMapper}
|
newRandomRoute(),
|
||||||
|
]);
|
||||||
|
}}
|
||||||
|
text="Reset w/ 3 scenes"
|
||||||
/>
|
/>
|
||||||
}
|
<NavButton
|
||||||
/>
|
onPress={() => {
|
||||||
</View>
|
this.props.navigator.pop();
|
||||||
|
}}
|
||||||
|
text="Exit NavigationBar Example"
|
||||||
|
/>
|
||||||
|
</ScrollView>
|
||||||
|
)}
|
||||||
|
navigationBar={
|
||||||
|
<Navigator.NavigationBar
|
||||||
|
navigationBarRouteMapper={NavigationBarRouteMapper}
|
||||||
|
navigationBarStyles={styles.navBar}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
appContainer: {
|
messageText: {
|
||||||
overflow: 'hidden',
|
fontSize: 17,
|
||||||
backgroundColor: '#ffffff',
|
fontWeight: '500',
|
||||||
flex: 1,
|
padding: 15,
|
||||||
|
marginTop: 50,
|
||||||
|
marginLeft: 15,
|
||||||
},
|
},
|
||||||
scene: {
|
button: {
|
||||||
paddingTop: 50,
|
backgroundColor: 'white',
|
||||||
flex: 1,
|
padding: 15,
|
||||||
|
borderBottomWidth: 1 / PixelRatio.get(),
|
||||||
|
borderBottomColor: '#CDCDCD',
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
navBar: {
|
||||||
|
backgroundColor: 'white',
|
||||||
},
|
},
|
||||||
navBarText: {
|
navBarText: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
@ -115,9 +156,20 @@ var styles = StyleSheet.create({
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
marginVertical: 9,
|
marginVertical: 9,
|
||||||
},
|
},
|
||||||
|
navBarLeftButton: {
|
||||||
|
paddingLeft: 10,
|
||||||
|
},
|
||||||
|
navBarRightButton: {
|
||||||
|
paddingRight: 10,
|
||||||
|
},
|
||||||
navBarButtonText: {
|
navBarButtonText: {
|
||||||
color: cssVar('fbui-accent-blue'),
|
color: cssVar('fbui-accent-blue'),
|
||||||
},
|
},
|
||||||
|
scene: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 20,
|
||||||
|
backgroundColor: '#EAEAEA',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = NavigationBarSample;
|
module.exports = NavigationBarSample;
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
var React = require('react-native');
|
var React = require('react-native');
|
||||||
var {
|
var {
|
||||||
Navigator,
|
Navigator,
|
||||||
|
PixelRatio,
|
||||||
ScrollView,
|
ScrollView,
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
Text,
|
||||||
|
@ -20,30 +21,78 @@ var BreadcrumbNavSample = require('./BreadcrumbNavSample');
|
||||||
var NavigationBarSample = require('./NavigationBarSample');
|
var NavigationBarSample = require('./NavigationBarSample');
|
||||||
var JumpingNavSample = require('./JumpingNavSample');
|
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 {
|
class NavMenu extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<ScrollView style={styles.scene}>
|
<ScrollView style={styles.scene}>
|
||||||
<TouchableHighlight style={styles.button} onPress={() => {
|
<Text style={styles.messageText}>{this.props.message}</Text>
|
||||||
this.props.navigator.push({ id: 'breadcrumbs' });
|
<NavButton
|
||||||
}}>
|
onPress={() => {
|
||||||
<Text style={styles.buttonText}>Breadcrumbs Example</Text>
|
this.props.navigator.push({
|
||||||
</TouchableHighlight>
|
message: 'Swipe right to dismiss',
|
||||||
<TouchableHighlight style={styles.button} onPress={() => {
|
sceneConfig: Navigator.SceneConfigs.FloatFromRight,
|
||||||
this.props.navigator.push({ id: 'navbar' });
|
});
|
||||||
}}>
|
}}
|
||||||
<Text style={styles.buttonText}>Navbar Example</Text>
|
text="Float in from right"
|
||||||
</TouchableHighlight>
|
/>
|
||||||
<TouchableHighlight style={styles.button} onPress={() => {
|
<NavButton
|
||||||
this.props.navigator.push({ id: 'jumping' });
|
onPress={() => {
|
||||||
}}>
|
this.props.navigator.push({
|
||||||
<Text style={styles.buttonText}>Jumping Example</Text>
|
message: 'Swipe down to dismiss',
|
||||||
</TouchableHighlight>
|
sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
|
||||||
<TouchableHighlight style={styles.button} onPress={() => {
|
});
|
||||||
this.props.onExampleExit();
|
}}
|
||||||
}}>
|
text="Float in from bottom"
|
||||||
<Text style={styles.buttonText}>Exit Navigator Example</Text>
|
/>
|
||||||
</TouchableHighlight>
|
<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 <Navigator> Example"
|
||||||
|
/>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -58,19 +107,20 @@ var TabBarExample = React.createClass({
|
||||||
|
|
||||||
renderScene: function(route, nav) {
|
renderScene: function(route, nav) {
|
||||||
switch (route.id) {
|
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 (
|
return (
|
||||||
<NavMenu
|
<NavMenu
|
||||||
|
message={route.message}
|
||||||
navigator={nav}
|
navigator={nav}
|
||||||
onExampleExit={this.props.onExampleExit}
|
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 (
|
return (
|
||||||
<Navigator
|
<Navigator
|
||||||
style={styles.container}
|
style={styles.container}
|
||||||
initialRoute={{ id: 'menu', }}
|
initialRoute={{ message: "First Scene", }}
|
||||||
renderScene={this.renderScene}
|
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({
|
var styles = StyleSheet.create({
|
||||||
|
messageText: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '500',
|
||||||
|
padding: 15,
|
||||||
|
marginTop: 50,
|
||||||
|
marginLeft: 15,
|
||||||
|
},
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
backgroundColor: 'white',
|
backgroundColor: 'white',
|
||||||
padding: 15,
|
padding: 15,
|
||||||
|
borderBottomWidth: 1 / PixelRatio.get(),
|
||||||
|
borderBottomColor: '#CDCDCD',
|
||||||
},
|
},
|
||||||
buttonText: {
|
buttonText: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '500',
|
||||||
},
|
},
|
||||||
scene: {
|
scene: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
paddingTop: 64,
|
paddingTop: 20,
|
||||||
|
backgroundColor: '#EAEAEA',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Загрузка…
Ссылка в новой задаче