mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-26 07:04:05 +08:00
Updates from Thu 26 Mar
- [React Native] Fix incorrect if-statement in RCTGeolocation | Alex Akers - [ReactNative] s/ReactKit/React/g | Tadeu Zagallo - [React Native] View border support | Nick Lockwood - [Assets] Allow scripts to override assetRoots | Amjad Masad - [ReactNative] Navigator docs | Eric Vicenti - [ReactNative] License headers and renaming | Eric Vicenti - [React Native] Add CocoaPods spec | Tadeu Zagallo - Added explicit types for all view properties | Nick Lockwood - [ReactNative] s/ReactNavigator/Navigator/ | Tadeu Zagallo - [ReactNative] Add copyright header for code copied from the jQuery UI project | Martin Konicek - [ReactNative] PanResponder documentation | Eric Vicenti
This commit is contained in:
Christopher Chedeau
277
Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
Normal file
277
Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* Copyright (c) 2015-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.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
Navigator,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TabBarIOS,
|
||||
Text,
|
||||
View,
|
||||
TouchableHighlight,
|
||||
} = 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',
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var SampleNavigationBarRouteMapper = {
|
||||
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 (
|
||||
<TouchableHighlight
|
||||
onPress={() => navigator.push(_getRandomRoute())}>
|
||||
<View>
|
||||
<Text style={styles.titleText}>{route.title}</Text>
|
||||
</View>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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({
|
||||
|
||||
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}
|
||||
navigationBar={
|
||||
<Navigator.BreadcrumbNavigationBar
|
||||
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</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,
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
appContainer: {
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#dddddd',
|
||||
flex: 1,
|
||||
},
|
||||
titleText: {
|
||||
fontSize: 18,
|
||||
color: '#666666',
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
lineHeight: 32,
|
||||
},
|
||||
filterText: {
|
||||
color: '#5577ff',
|
||||
},
|
||||
// TODO: Accept icons from route.
|
||||
crumbIconPlaceholder: {
|
||||
flex: 1,
|
||||
backgroundColor: '#666666',
|
||||
},
|
||||
crumbSeparatorPlaceholder: {
|
||||
flex: 1,
|
||||
backgroundColor: '#aaaaaa',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = BreadcrumbNavSample;
|
||||
Reference in New Issue
Block a user