使用React Native使用圖像的動畫？

我試圖用React Native做一個動畫，需要首先下載網絡圖像。基本上我有一個ListView圖像，當用戶點擊一個列表項時，我需要點擊圖像並用它做一些動畫。我可以使用來自文件/應用程序的圖像執行此操作，但問題出在網絡圖像上。使用React Native使用圖像的動畫？

代碼（削減簡潔一些代碼）：

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下載？

來源

2017-04-06 Brain Young

在我看來，真正的問題是您是否可以在本地下載圖像到設備並使用它們。看看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組件

來源

2017-04-06 22:07:57 SoZettaSho

使用React Native使用圖像的動畫？

回答

相關問題