React-Native ListView加载图片淡入淡出效果的组件

今天练习项目中需要给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上可以看到我的完整项目哦。