Question

我正在尝试使用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>
     }
    }

我很欣赏网络图片需要时间下载，我想我想问的是我是否可以重新使用已经使用ListView下载的图像？

Answer 1

在我看来，真正的问题是你是否可以在本地将图像下载到设备并使用它们。看看this library（如果您不喜欢它，则不再保留，请尝试this）。如果您使用react-native-fs，则可以轻松使用其downloadFile功能，如下所示：

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)"）作为source.uri或Image组件的Animated.Image属性传递

使用React Native的图像动画？

1 个答案: