React Native로 이미지를 사용중인가요?

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을 시도하십시오).

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 속성으로, : 당신이 react-native-fs 사용하는 경우 다음과 같이 쉽게 그 downloadFile 기능을 사용