React-native ListView Loading a picture fade effect component

In today's practice project, you need to add a fade effect to the ListView when loading the picture, so you simply encapsulate a component yourself:

1' Use strict '2 3Import React from ' react-native '4 5 var {6 Animated,7 Proptypes8} =React9 Ten class Aniimage extends React.component { OneStatic Proptypes = { A url:PropTypes.string, - InputRange:PropTypes.array, - OutputRange:PropTypes.array the   }; - render () { -     var{style, URL, Inputrange, outputrange} = This. Props -      This. _animatedvalue =NewAnimated.value (0) +Let interpolatedcoloranimation = This. _animatedvalue.interpolate ({ - Inputrange:inputrange, + Outputrange:outputrange A     }) at     return ( -<Animated.image -onloadend={() = { -Animated.timing ( This. _animatedvalue, { -tovalue:100, -duration:500 in }). Start () -         }} toSource={{Uri:url}} +Style={[style, {opacity:interpolatedcoloranimation}]}/> -     ) the   } * } $ Panax NotoginsengModule.exports = Aniimage

So how do you call it?

First, import Aniimage

Second, call

1 <aniimage2  inputrange={[0, +]}3  outputrange={[0, 1 ]}4  style={styles.aniimage}5  url={' http://192.168.6.5:8888/ Getimage?imgname= ' + commidities.imgpath1}/>

This will see the desired effect.

Https://github.com/weifengzz/GuoKu

You can see my complete project on GitHub.

React-native ListView Loading a picture fade effect component