crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 4.71 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),l=r(d[1]),n=r(d[2]),c=r(d[3]),s=r(d[4]),o=r(d[5]),E=r(d[6]),u=E.StyleSheet,z=E.Text,y=E.View,f=r(d[7]),p=r(d[8]),h=(function(E){function u(){return t(this,u),n(this,c(u).apply(this,arguments))}return s(u,E),l(u,[{key:"render",value:function(){var t=this.props.size||20,l=this.props.bgColor||'#527fe4';return o.createElement(y,{style:{borderRadius:t/2,backgroundColor:l,width:t,height:t,margin:1}})}}]),u})(o.Component),x=(function(E){function u(){return t(this,u),n(this,c(u).apply(this,arguments))}return s(u,E),l(u,[{key:"render",value:function(){return o.createElement(y,{style:[{flexDirection:'row',backgroundColor:'#f6f7f8',borderWidth:.5,borderColor:'#d6d7da',marginBottom:2},this.props.style]},this.props.children)}}]),u})(o.Component),b=(function(E){function u(){return t(this,u),n(this,c(u).apply(this,arguments))}return s(u,E),l(u,[{key:"render",value:function(){var t=[o.createElement(h,{bgColor:"#527fe4",key:"blue"}),o.createElement(h,{bgColor:"#D443E3",key:"violet"}),o.createElement(h,{bgColor:"#FF9049",key:"orange"}),o.createElement(h,{bgColor:"#FFE649",key:"yellow"}),o.createElement(h,{bgColor:"#7FE040",key:"green"})];return o.createElement(p,{title:this.props.navigator?null:'Layout'},o.createElement(f,{title:"Flex Direction"},o.createElement(z,null,"row"),o.createElement(x,{style:{flexDirection:'row'}},t),o.createElement(z,null,"row-reverse"),o.createElement(x,{style:{flexDirection:'row-reverse'}},t),o.createElement(z,null,"column"),o.createElement(x,{style:{flexDirection:'column'}},t),o.createElement(z,null,"column-reverse"),o.createElement(x,{style:{flexDirection:'column-reverse'}},t),o.createElement(y,{style:[C.overlay,{position:'absolute',top:15,left:160}]},o.createElement(z,null,'top: 15, left: 160'))),o.createElement(f,{title:"Justify Content - Main Direction"},o.createElement(z,null,"flex-start"),o.createElement(x,{style:{justifyContent:'flex-start'}},t),o.createElement(z,null,"center"),o.createElement(x,{style:{justifyContent:'center'}},t),o.createElement(z,null,"flex-end"),o.createElement(x,{style:{justifyContent:'flex-end'}},t),o.createElement(z,null,"space-between"),o.createElement(x,{style:{justifyContent:'space-between'}},t),o.createElement(z,null,"space-around"),o.createElement(x,{style:{justifyContent:'space-around'}},t)),o.createElement(f,{title:"Align Items - Other Direction"},o.createElement(z,null,"flex-start"),o.createElement(x,{style:{alignItems:'flex-start',height:30}},o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:8})),o.createElement(z,null,"center"),o.createElement(x,{style:{alignItems:'center',height:30}},o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:8})),o.createElement(z,null,"flex-end"),o.createElement(x,{style:{alignItems:'flex-end',height:30}},o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:10}),o.createElement(h,{size:20}),o.createElement(h,{size:17}),o.createElement(h,{size:12}),o.createElement(h,{size:15}),o.createElement(h,{size:8}))),o.createElement(f,{title:"Flex Wrap"},o.createElement(x,{style:{flexWrap:'wrap'}},'oooooooooooooooo'.split('').map(function(t,l){return o.createElement(h,{key:l})}))))}}]),u})(o.Component),C=u.create({overlay:{backgroundColor:'#aaccff',borderRadius:10,borderWidth:.5,opacity:.5,padding:5}});e.title='Layout - Flexbox',e.description='Examples of using the flexbox API to layout views.',e.displayName='LayoutExample',e.examples=[{title:'Simple layout using flexbox',render:function(){return o.createElement(b,null)}}]},666776,[3,4,5,8,9,11,15,666679,666681]);