今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件:
'use strict' import React from 'react-native' var {
Animated,
PropTypes
} = React class AniImage extends React.Component {
static propTypes = {
url: PropTypes.string,
inputRange: PropTypes.array,
outputRange: PropTypes.array
};
render () {
var { style, url, inputRange, outputRange } = this.props
this._animatedValue = new Animated.Value(0)
let interpolatedColorAnimation = this._animatedValue.interpolate({
inputRange: inputRange,
outputRange: outputRange
})
return (
<Animated.Image
onLoadEnd={() => {
Animated.timing(this._animatedValue, {
toValue: 100,
duration: 500
}).start()
}}
source={{uri: url}}
style={[style, {opacity: interpolatedColorAnimation}]} />
)
}
} module.exports = AniImage
那么如何调用呢?
一、导入 AniImage
二、调用
<AniImage
inputRange={[0, 100]}
outputRange={[0, 1]}
style={styles.aniImage}
url={'http://192.168.6.5:8888/getImage?imgName=' + commidities.imgPath1} />
这样就看到想要的效果啦。
https://github.com/weifengzz/GuoKu
在github上可以看到我的完整项目哦。