crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 2.73 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),o=r(d[2]),l=r(d[3]),s=r(d[4]),u=r(d[5]),y=r(d[6]),c=y.Image,h=y.LayoutAnimation,x=y.StyleSheet,w=y.Text,v=y.View,f=(function(y){function x(){var n,s;t(this,x);for(var u=arguments.length,y=new Array(u),c=0;c<u;c++)y[c]=arguments[c];return(s=o(this,(n=l(x)).call.apply(n,[this].concat(y)))).state={viewStyle:{margin:20}},s.animateViewLayout=function(){h.configureNext(h.Presets.spring,function(){s.addWrapText()}),s.setState({viewStyle:{margin:s.state.viewStyle.margin>20?20:60}})},s.addWrapText=function(){s.setState({extraText:' And a bunch more text to wrap around a few lines.'},s.changeContainer)},s.changeContainer=function(){s.setState({containerStyle:{width:280}})},s.onViewLayout=function(t){s.setState({viewLayout:t.nativeEvent.layout})},s.onTextLayout=function(t){s.setState({textLayout:t.nativeEvent.layout})},s.onImageLayout=function(t){s.setState({imageLayout:t.nativeEvent.layout})},s}return s(x,y),n(x,[{key:"render",value:function(){var t=[p.view,this.state.viewStyle],n=this.state.textLayout||{width:'?',height:'?'},o=this.state.imageLayout||{x:'?',y:'?'};return u.createElement(v,{style:this.state.containerStyle},u.createElement(w,null,"layout events are called on mount and whenever layout is recalculated. Note that the layout event will typically be received",' ',u.createElement(w,{style:p.italicText},"before")," the layout has updated on screen, especially when using layout animations.",' ',u.createElement(w,{style:p.pressText,onPress:this.animateViewLayout},"Press here to change layout.")),u.createElement(v,{ref:"view",onLayout:this.onViewLayout,style:t},u.createElement(c,{ref:"img",onLayout:this.onImageLayout,style:p.image,source:{uri:'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}),u.createElement(w,null,"ViewLayout:",' ',JSON.stringify(this.state.viewLayout,null,' ')+'\n\n'),u.createElement(w,{ref:"txt",onLayout:this.onTextLayout,style:p.text},"A simple piece of text.",this.state.extraText),u.createElement(w,null,'\n',"Text w/h: ",n.width,"/",n.height+'\n',"Image x/y: ",o.x,"/",o.y)))}}]),x})(u.Component),p=x.create({view:{padding:12,borderColor:'black',borderWidth:.5,backgroundColor:'transparent'},text:{alignSelf:'flex-start',borderColor:'rgba(0, 0, 255, 0.2)',borderWidth:.5},image:{width:50,height:50,marginBottom:10,alignSelf:'center'},pressText:{fontWeight:'bold'},italicText:{fontStyle:'italic'}});e.title='Layout Events',e.description="Examples that show how Layout events can be used to measure view size and position.",e.examples=[{title:'LayoutEventExample',render:function(){return u.createElement(f,null)}}]},666713,[3,4,5,8,9,11,15]);