crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 3.69 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]),s=r(d[3]),c=r(d[4]),o=r(d[5]),u=r(d[6]),y=u.Animated,k=u.Image,S=u.MaskedViewIOS,f=u.StyleSheet,p=u.Text,h=u.View,E=(function(u){function k(){var l,c;t(this,k);for(var o=arguments.length,u=new Array(o),S=0;S<o;S++)u[S]=arguments[S];return(c=n(this,(l=s(k)).call.apply(l,[this].concat(u))))._maskRotateAnimatedValue=new y.Value(0),c._maskScaleAnimatedValue=new y.Value(1),c}return c(k,u),l(k,[{key:"componentDidMount",value:function(){y.loop(y.sequence([y.timing(this._maskScaleAnimatedValue,{toValue:1.3,timing:750,useNativeDriver:!0}),y.timing(this._maskScaleAnimatedValue,{toValue:1,timing:750,useNativeDriver:!0})])).start(),y.loop(y.timing(this._maskRotateAnimatedValue,{toValue:360,timing:2e3,useNativeDriver:!0})).start()}},{key:"render",value:function(){return o.createElement(h,{style:C.exampleWrapperStyle},o.createElement(S,{style:C.flexStyle,maskElement:o.createElement(y.View,{style:[C.maskContainerStyle,{transform:[{scale:this._maskScaleAnimatedValue}]}]},o.createElement(p,{style:C.maskTextStyle},"Basic Mask"))},o.createElement(y.View,{style:{flex:1,transform:[{rotate:this._maskRotateAnimatedValue.interpolate({inputRange:[0,360],outputRange:['0deg','360deg']})}]}},o.createElement(h,{style:C.blueStyle}),o.createElement(h,{style:C.redStyle}))))}}]),k})(o.Component),x=(function(u){function y(){var l,c;t(this,y);for(var o=arguments.length,u=new Array(o),k=0;k<o;k++)u[k]=arguments[k];return(c=n(this,(l=s(y)).call.apply(l,[this].concat(u)))).state={alternateChildren:!0},c}return c(y,u),l(y,[{key:"componentDidMount",value:function(){var t=this;setInterval(function(){t.setState(function(t){return{alternateChildren:!t.alternateChildren}})},1e3)}},{key:"render",value:function(){return o.createElement(h,{style:C.exampleWrapperStyle},o.createElement(S,{style:C.flexStyle,maskElement:o.createElement(h,{style:C.maskContainerStyle},o.createElement(p,{style:C.maskTextStyle},"Basic Mask"))},this.state.alternateChildren?[o.createElement(h,{key:1,style:C.blueStyle}),o.createElement(h,{key:2,style:C.redStyle})]:null))}}]),y})(o.Component),C=f.create({exampleWrapperStyle:{width:340,height:300,alignSelf:'center'},imageStyle:{height:200,width:200},maskContainerStyle:{flex:1,backgroundColor:'transparent',justifyContent:'center',alignItems:'center'},maskTextStyle:{backgroundColor:'transparent',fontSize:40,fontWeight:'bold'},blueStyle:{flex:1,backgroundColor:'blue'},redStyle:{flex:1,backgroundColor:'red'},grayStyle:{backgroundColor:'#eeeeee'},flexStyle:{flex:1}});e.title='<MaskedViewIOS>',e.description='Renders the child view with a mask specified in the `renderMask` prop.',e.examples=[{title:'Basic Mask',render:function(){return o.createElement(h,{style:C.exampleWrapperStyle},o.createElement(S,{style:C.flexStyle,maskElement:o.createElement(h,{style:C.maskContainerStyle},o.createElement(p,{style:C.maskTextStyle},"Basic Mask"))},o.createElement(h,{style:C.blueStyle}),o.createElement(h,{style:C.redStyle})))}},{title:'Image Mask',render:function(){return o.createElement(h,{style:[C.exampleWrapperStyle,C.grayStyle]},o.createElement(S,{style:C.flexStyle,maskElement:o.createElement(h,{style:C.maskContainerStyle},o.createElement(k,{style:C.imageStyle,source:r(d[7])}))},o.createElement(h,{style:C.maskContainerStyle},o.createElement(k,{resizeMode:"cover",style:C.imageStyle,source:{uri:'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}))))}},{title:'Animated Mask',render:function(){return o.createElement(E,null)}},{title:'Mask w/ Changing Children',render:function(){return o.createElement(x,null)}}]},666717,[3,4,5,8,9,11,15,666718]);