React native 使用带有React Native的图像的动画？

我正在尝试用React Native制作动画，这需要先下载网络图像。基本上，我有一个

ListView

的图像，当用户点击列表项时，我需要得到点击的图像并用它做一些动画。我可以通过文件/应用程序中的图像执行此操作，但问题在于网络图像

代码（为简洁起见，删去一些代码）：

    const data = [
       {image:"http://someimage.com/2.jpg"},
       {image:"http://someimage.com/1.jpg"}
    ];

    class ImageAnimate extends Component{
       constructor() {
         super(props);
         this.state = {
           dataSource: ds.cloneWithRows(data),
           pageY: new Animated.Value(0)
           image: ""  // image source to animate
           ....
         }
       }

      openListing(data) {
         this.setState({image: data.image}); // image to use from ListView
         Animated.timing(this.state.pageY, {duration: 1000, toValue: -200, useNativeDriver: true}).start()
      }

     render() {
         return <View> 
                   <ListView ... /> // ListView of images
                   <Animated.Image source={{uri: this.state.image}} />
               </View>
     }
    }

const数据=[
{图像：http://someimage.com/2.jpg"},
{图像：http://someimage.com/1.jpg"}
];
类ImageAnimate扩展组件{
构造函数（）{
超级（道具）；
此.state={
数据源：ds.cloneWithRows（数据），
pageY:新动画。值（0）
图像：//要设置动画的图像源
....
}
}
开放列表（数据）{
this.setState（{image:data.image}）；//要从ListView使用的图像
time（this.state.pageY，{duration:1000，toValue:-200，useNativeDriver:true}）
}
render（）{
返回
//图像列表视图
}
}

---

我明白网络图像需要时间下载，我想我想问的是，我是否可以重复使用已经用ListView下载的图像

在我看来，真正的问题是您是否可以将图像下载到本地设备并使用它们。看看（如果你不喜欢它不再被维护，试试看）。如果使用

react native fs

，则可以轻松使用其

下载文件

功能，如下所示：

var options = {
      fromUrl: $(IMAGE_URL),
      toFile: RNFS.DocumentDirectoryPath + "/($DESIRED_FILENAME)"
    }
    RNFS.downloadFile(options).promise.then(res => {
      this.setState({downloadComplete: true});
      console.log("File download completed at " + options.toFile);
    }).catch(err => {
      console.log("Error downloading file: ", err);
    });

然后，您应该能够将本地路径，即

RNFS.DocumentDirectoryPath+“/（$FILENAME）”

作为

Image

或

Animated.Image

组件的

source.uri

属性传递