오프라인 사용을 위해 React Native로 데이터 파일 다운로드

Question

사용자가 Android 또는 iOS 장치에 설치할 다른 게임 팩을 선택할 수있는 앱을 개발하고 싶습니다. 게임 팩이 구성됩니다 :

• 하나 이상의 JSON 파일
• 이미지
• 는 지금

소리 나는 해요 정말 관심이없는 이들은 개별적으로 또는 zip 파일 (전송하는 경우 zip 파일이 확실히 선호 될 것입니다). 물론 게임 팩의 현재 목록을 얻고 사용자가 선택한 것을 다운로드하려면 장치를 인터넷에 연결해야합니다. 게임 팩이 휴대 전화에 다운로드되면 사용자는 모든 파일을 갖기 때문에 인터넷 연결이 필요하지 않습니다.

내 프로젝트에서 구현하려면 어떻게해야합니까?

파일을 어떻게 다운로드합니까? react-native-fetch-blob 라이브러리를 사용하고 특정 위치에 저장합니까? 이 라이브러리는 영구적 인 것이 아니라 "캐시"로 저장하는 것을 의미하므로 이것이 올바른 해결책인지 확신 할 수 없습니다. 라이브러리 페이지에서보고있는 특정 섹션은 "특정 파일 경로 사용"입니다. 하지만 캐시이기 때문에 더 장기적인 스토리지가 필요한 다른 것을 찾아야합니까? 이 페이지에서는 파일이 삭제되지 않을 것이라고 말하며 영구 저장 장치와 캐시의 차이점에 대해 약간 혼란 스럽습니다.

일단 파일을 다운로드하면 이미지를 열고 표시하고, 사운드 파일을 열고 재생할 수 있으며, json 파일을 열고 처리 할 수 ​​있습니까?

Answer 1

체크 아웃 기본 FS, 여기 downloadFile:

https://github.com/johanneslumpe/react-native-fs#downloadfileoptions-downloadfileoptions--jobid-number-promise-promisedownloadresult-

작업의 예입니다에 특히 문서 반응 :

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Image, 
} from 'react-native'; 
import RNFS from 'react-native-fs'; 


export default class downloadFile extends Component { 
    constructor() { 
    super() 
    this.state = { 
     isDone: false, 
    }; 
    this.onDownloadImagePress = this.onDownloadImagePress.bind(this); 
    } 

    onDownloadImagePress() { 

     RNFS.downloadFile({ 
     fromUrl: 'https://facebook.github.io/react-native/img/header_logo.png', 
     toFile: `${RNFS.DocumentDirectoryPath}/react-native.png`, 
     }).promise.then((r) => { 
     this.setState({ isDone: true }) 
     }); 
    } 

    render() { 
    const preview = this.state.isDone ? (<View> 
     <Image style={{ 
     width: 100, 
     height: 100, 
     backgroundColor: 'black', 
     }} 
     source={{ 
      uri: `file://${RNFS.DocumentDirectoryPath}/react-native.png`, 
      scale: 1 
     }} 
     /> 
     <Text>{`file://${RNFS.DocumentDirectoryPath}/react-native.png`}</Text> 
    </View> 
    ) : null; 
    return (
     <View> 
     <Text onPress={this.onDownloadImagePress}>Download Image</Text> 
     {preview} 
     </View> 
    ); 
    } 
} 
AppRegistry.registerComponent('downloadFile',() => downloadFile); 

그것은 height 및 width이 설정되어야 함을 아는 것이 중요합니다 Image