kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 03:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Ben Alpert
2015-01-29 17:10:49 -08:00
commit a15603d8f1
382 changed files with 39183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
Examples/UIExplorer/LayoutExample.js Normal file
View File

@@ -0,0 +1,145 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule LayoutExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var Circle = React.createClass({
render: function() {
var size = this.props.size || 20;
return (
<View
style={{
borderRadius: size / 2,
backgroundColor: '#527fe4',
width: size,
height: size,
margin: 1,
}}
/>
);
}
});
var CircleBlock = React.createClass({
render: function() {
var circleStyle = {
flexDirection: 'row',
backgroundColor: '#f6f7f8',
borderWidth: 0.5,
borderColor: '#d6d7da',
marginBottom: 2,
};
return (
<View style={[circleStyle, this.props.style]}>
{this.props.children}
</View>
);
}
});
var LayoutExample = React.createClass({
statics: {
title: 'Layout - Flexbox',
description: 'Examples of using the flexbox API to layout views.'
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
<UIExplorerBlock title="Flex Direction">
<Text>row</Text>
<CircleBlock style={{flexDirection: 'row'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>column</Text>
<CircleBlock style={{flexDirection: 'column'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
<Text>{'top: 15, left: 160'}</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Justify Content - Main Direction">
<Text>flex-start</Text>
<CircleBlock style={{justifyContent: 'flex-start'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{justifyContent: 'center'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{justifyContent: 'flex-end'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-between</Text>
<CircleBlock style={{justifyContent: 'space-between'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-around</Text>
<CircleBlock style={{justifyContent: 'space-around'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Align Items - Other Direction">
<Text>flex-start</Text>
<CircleBlock style={{alignItems: 'flex-start', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{alignItems: 'center', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{alignItems: 'flex-end', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Flex Wrap">
<CircleBlock style={{flexWrap: 'wrap'}}>
{'oooooooooooooooo'.split('').map(() => <Circle />)}
</CircleBlock>
</UIExplorerBlock>
</UIExplorerPage>
);
}
});
var styles = StyleSheet.create({
overlay: {
backgroundColor: '#aaccff',
borderRadius: 10,
borderWidth: 0.5,
opacity: 0.5,
padding: 5,
},
});
module.exports = LayoutExample;