React-Native ListView載入圖片淡入淡出效果的組件

標籤：

今天練習項目中需要給listview在載入圖片時增加一個淡入淡出的效果，因此乾脆就自己封裝了一個組件：

 1 ‘use strict‘ 2  3 import React from ‘react-native‘ 4  5 var { 6   Animated, 7   PropTypes 8 } = React 9 10 class AniImage extends React.Component {11   static propTypes = {12     url: PropTypes.string,13     inputRange: PropTypes.array,14     outputRange: PropTypes.array15   };16   render () {17     var { style, url, inputRange, outputRange } = this.props18     this._animatedValue = new Animated.Value(0)19     let interpolatedColorAnimation = this._animatedValue.interpolate({20       inputRange: inputRange,21       outputRange: outputRange22     })23     return (24       <Animated.Image25         onLoadEnd={() => {26           Animated.timing(this._animatedValue, {27             toValue: 100,28             duration: 50029           }).start()30         }}31         source={{uri: url}}32         style={[style, {opacity: interpolatedColorAnimation}]} />33     )34   }35 }36 37 module.exports = AniImage

那麼如何調用呢？

一、匯入 AniImage

二、調用

1 <AniImage2  inputRange={[0, 100]}3  outputRange={[0, 1]}4  style={styles.aniImage}5  url={‘http://192.168.6.5:8888/getImage?imgName=‘ + commidities.imgPath1} />

這樣就看到想要的效果啦。

https://github.com/weifengzz/GuoKu

在github上可以看到我的完整項目哦。 

React-Native ListView載入圖片淡入淡出效果的組件