kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-12 19:48:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

- [ReactNative] Rename JSNavigationStack to ReactNavigator, rename scene config | Eric Vicenti

Browse Source
This commit is contained in:
Christopher Chedeau
2015-03-24 20:33:17 -07:00
parent 57337cb3e4
commit 39304ab06b
14 changed files with 163 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js → Examples/UIExplorer/ReactNavigator/BreadcrumbNavSample.js
View File

@@ -6,7 +6,7 @@
'use strict';
var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var StyleSheet = require('StyleSheet');
var ScrollView = require('ScrollView');
@@ -16,8 +16,6 @@ var Text = require('Text');
var TouchableBounce = require('TouchableBounce');
var View = require('View');
var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';
var _getRandomRoute = function() {
@@ -187,7 +185,7 @@ var BreadcrumbNavSample = React.createClass({
onPress={this.onTabSelect.bind(this, 0)}
icon={require('image!madman_tabnav_list')}
title="One">
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
@@ -204,8 +202,8 @@ var BreadcrumbNavSample = React.createClass({
onPress={this.onTabSelect.bind(this, 1)}
icon={require('image!madman_tabnav_create')}
title="Two">
<JSNavigationStack
animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
<ReactNavigator
configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}

4
Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js → Examples/UIExplorer/ReactNavigator/JumpingNavSample.js
View File

@@ -5,7 +5,7 @@
*/
'use strict';
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var StyleSheet = require('StyleSheet');
var ScrollView = require('ScrollView');
@@ -132,7 +132,7 @@ var JumpingNavSample = React.createClass({
render: function() {
return (
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={INIT_ROUTE}

4
Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js → Examples/UIExplorer/ReactNavigator/NavigationBarSample.js
View File

@@ -5,7 +5,7 @@
*/
'use strict';
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var NavigationBar = require('NavigationBar');
var React = require('React');
var StyleSheet = require('StyleSheet');
@@ -70,7 +70,7 @@ var NavigationBarSample = React.createClass({
render: function() {
return (
<View style={styles.appContainer}>
<JSNavigationStack
<ReactNavigator
debugOverlay={false}
style={styles.appContainer}
initialRoute={newRandomRoute()}

10
Examples/UIExplorer/JSNavigationStack/NestedBreadcrumbNavSample.js → Examples/UIExplorer/ReactNavigator/NestedBreadcrumbNavSample.js
View File

@@ -6,7 +6,7 @@
'use strict';
var BreadcrumbNavigationBar = require('BreadcrumbNavigationBar');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var React = require('React');
var ScrollView = require('ScrollView');
var StyleSheet = require('StyleSheet');
@@ -90,7 +90,7 @@ var SecondDeepRouteMapper = (route, navigator) => (
<Text style={styles.buttonText}>Push Horizontal</Text>
</View>
</TouchableBounce>
<JSNavigationStack
<ReactNavigator
style={styles.thirdDeepNavigator}
initialRoute={{title: '3x Nested Horizontal'}}
renderScene={ThirdDeepRouteMapper}
@@ -111,7 +111,7 @@ var FirstDeepRouteMapper = (route, navigator) => (
<Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
</View>
</TouchableBounce>
<JSNavigationStack
<ReactNavigator
style={styles.secondDeepNavigator}
initialRoute={{title: '2x Nested Horizontal Nav'}}
renderScene={SecondDeepRouteMapper}
@@ -132,9 +132,9 @@ var NestedBreadcrumbNavSample = React.createClass({
var initialRoute = {title: 'Vertical'};
// No navigation bar.
return (
<JSNavigationStack
<ReactNavigator
style={[styles.appContainer]}
animationConfigRouteMapper={() => JSNavigationStack.AnimationConfigs.FloatFromBottom}
configureScene={() => ReactNavigator.SceneConfigs.FloatFromBottom}
initialRoute={initialRoute}
renderScene={FirstDeepRouteMapper}
/>

10
Examples/UIExplorer/JSNavigationStack/JSNavigationStackExample.js → Examples/UIExplorer/ReactNavigator/ReactNavigatorExample.js
View File

@@ -4,7 +4,7 @@
'use strict';
var React = require('React');
var JSNavigationStack = require('JSNavigationStack');
var ReactNavigator = require('ReactNavigator');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var ScrollView = require('ScrollView');
@@ -35,7 +35,7 @@ class NavMenu extends React.Component {
<TouchableHighlight style={styles.button} onPress={() => {
this.props.onExampleExit();
}}>
<Text style={styles.buttonText}>Exit JSNavigationStack Example</Text>
<Text style={styles.buttonText}>Exit ReactNavigator Example</Text>
</TouchableHighlight>
</ScrollView>
);
@@ -45,7 +45,7 @@ class NavMenu extends React.Component {
var TabBarExample = React.createClass({
statics: {
title: '<JSNavigationStack>',
title: '<ReactNavigator>',
description: 'JS-implemented navigation',
},
@@ -69,11 +69,11 @@ var TabBarExample = React.createClass({
render: function() {
return (
<JSNavigationStack
<ReactNavigator
style={styles.container}
initialRoute={{ id: 'menu', }}
renderScene={this.renderScene}
animationConfigRouteMapper={(route) => JSNavigationStack.AnimationConfigs.FloatFromBottom}
configureScene={(route) => ReactNavigator.SceneConfigs.FloatFromBottom}
/>
);
},

8
Examples/UIExplorer/UIExplorerList.js
View File

@@ -21,7 +21,7 @@ var {
TouchableHighlight,
View,
} = React;
var JSNavigationStackExample = require('./JSNavigationStack/JSNavigationStackExample');
var ReactNavigatorExample = require('./ReactNavigator/ReactNavigatorExample');
var createExamplePage = require('./createExamplePage');
@@ -33,7 +33,7 @@ var COMPONENTS = [
require('./ListViewSimpleExample'),
require('./MapViewExample'),
require('./NavigatorIOSExample'),
JSNavigationStackExample,
ReactNavigatorExample,
require('./PickerExample'),
require('./ScrollViewExample'),
require('./SliderIOSExample'),
@@ -146,9 +146,9 @@ class UIExplorerList extends React.Component {
}
_onPressRow(example) {
if (example === JSNavigationStackExample) {
if (example === ReactNavigatorExample) {
this.props.onExternalExampleRequested(
JSNavigationStackExample
ReactNavigatorExample
);
return;
}

210
Examples/UIExplorer/ViewExample.js
View File

@@ -17,106 +17,6 @@ var {
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var ViewExample = React.createClass({
statics: {
title: '<View>',
description: 'Basic building block of all UI.'
},
getInitialState: function() {
return {
textBorderExampleHeight: 20,
};
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : '<View>'}>
<UIExplorerBlock title="Background Color">
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border">
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Padding/Margin">
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true
</Text>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border Radius">
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Circle with Border Radius">
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
</UIExplorerBlock>
<UIExplorerBlock title="Overflow">
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 95,
height: 10,
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Opacity">
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</UIExplorerBlock>
</UIExplorerPage>
);
},
updateHeight: function() {
var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
this.setState({textBorderExampleHeight: height});
},
});
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
@@ -125,4 +25,112 @@ var styles = StyleSheet.create({
}
});
module.exports = ViewExample;
exports.title = '<View>';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
exports.examples = [
{
title: 'Background Color',
render: function() {
return (
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
);
},
}, {
title: 'Border',
render: function() {
return (
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
);
},
}, {
title: 'Padding/Margin',
render: function() {
return (
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true
</Text>
</View>
</View>
);
},
}, {
title: 'Border Radius',
render: function() {
return (
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
);
},
}, {
title: 'Circle with Border Radius',
render: function() {
return (
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
);
},
}, {
title: 'Overflow',
render: function() {
return (
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 95,
height: 10,
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
);
},
}, {
title: 'Opacity',
render: function() {
return (
<View>
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</View>
);
},
},
];