react-native-fs 플러그 인의 사용 및 만 나 는 구덩이 에 대한 자세 한 설명

react-native-fs 플러그 인 은 파일 이 업로드 와 다운로드 에 사용 되 며 iOS 와 android 를 모두 사용 할 수 있 습 니 다.File upload(iOS only).
설치 명령:

npm install react-native-fs --save
//  ：  react native   <0.40  ，     ：
npm install [email protected] --save 

설치 후 실행: 

react-native link react-native-fs 

android/app/src/main/android Manifest.xml 에 android 읽 기와 쓰기 권한 추가

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />　 

상기 설치 작업 을 마 친 후에 이 플러그 인의 여러 가지 방법 을 사용 할 수 있 습 니 다.각 방법의 구체 적 인 사용 예 는 링크 를 보십시오https://github.com/itinance/react-native-fs프로젝트 에서 그림 파일 을 다운로드 하고 로 컬 에 다운로드 한 그림 경 로 를 얻어 그림 을 표시 해 야 합 니 다.그래서 downloadFile 방법 을 사용 합 니 다.호출 가능 한 서 비 스 를 봉 인 했 습 니 다.코드 는 다음 과 같 습 니 다.

downloadFile(imageId, cookie, callback) {

    const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;

    var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId;

    //var formUrl = 'http://lorempixel.com/400/200/';

    const options = {

      fromUrl: formUrl,

      toFile: downloadDest,

      background: true,

      headers: {

        'Cookie': cookie //            cookie

      },

      begin: (res) => {

        //console.log(res);

      },

      progress: (res) => {

        //console.log(res);

      }

    };

    try {

      const ret = RNFS.downloadFile(options);

      ret.promise.then(res => {

        //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest)

        callback(null, 'file://' + downloadDest)

 

      }).catch(err => {

        callback(err)

      });

    }

    catch (e) {

      callback("error")

    }

 

  }, 

이 기능 을 실현 할 때 안 드 로 이 드 는 로 컬 그림 에 다운로드 되 어 표시 되 지 않 습 니 다.이 는 관련 자 료 를 조회 한 후에 안 드 로 이 드 가 이 플러그 인 을 호출 하기 때 문 입 니 다.인터페이스 인증 정 보 를 추가 해 야 합 니 다(인터페이스 가 검증 이 필요 한 경우).이 문 제 는 어떻게 해결 합 니까?
react-native-fs 플러그 인 을 호출 할 때 데이터 인터페이스 가 정 보 를 검증 해 야 한다 면 안 드 로 이 드 에서 오류 가 발생 했 고 iOS 에서 실행 하 는 데 문제 가 없습니다.인 터 페 이 스 는 인증 정보 가 있 기 때문에 이 플러그 인 을 호출 할 때 들 어 오지 않 았 습 니 다.iOS 에 인증 정 보 를 자동 으로 추가 하고 안 드 로 이 드 는 수 동 으로 설정 해 야 합 니 다.

이 오류 해결 방법:
1.로그 인 인 인 터 페 이 스 를 호출 할 때 쿠키(cookie 는 response 에 있 음)를 저장 하고 react-native-fs 를 호출 할 때 headers 에 전송 합 니 다.코드 는 다음 과 같 습 니 다. 

_appLogin(userName, password, callback){

 

    fetch(commonSvc.baseURL + '/account/app-login', {

      method: 'POST',

      headers: {

        'Accept': 'application/json',

        'Content-Type': 'application/json'

      },

      body: JSON.stringify({

        UserName: userName,

        Password: password

      })

    }).then(

      (response) => {

        if (response.ok) {

          return response;

        } else {

          var message;

          switch (response.status) {

            case 710:

              message = LanguageChooseSvc.strings['api_common_' + 710];

              break;

            case 711:

              message = LanguageChooseSvc.strings['api_common_' + 711];

              break;

            case 400:

              message = LanguageChooseSvc.strings['api_common_' + 400];

              break;

            default:

              message = commonSvc.httpErrorMessage;

              break;

          }

          throw {message: message};

        }

      }

    ).then(

      (responseJson) => {

        callback(null, responseJson);

      }

    ).catch(

      (error) => {

        callback(error.message);

      }

    );

  }, 

2.react-native-fs 를 호출 할 때 headers 에 넣 고 코드 는 다음 과 같 습 니 다.

 downloadFile(imageId, cookie, callback) {

    const downloadDest = `${RNFS.DocumentDirectoryPath}/${((Math.random() * 1000) | 0)}.jpg`;

    var formUrl = CommonSvc.baseURL + '/api/image/0/' + imageId;

    //var formUrl = 'http://lorempixel.com/400/200/';

    const options = {

      fromUrl: formUrl,

      toFile: downloadDest,

      background: true,

      headers: {

        'Cookie': cookie //            cookie

      },

      begin: (res) => {

        //console.log(res);

      },

      progress: (res) => {

        //console.log(res);

      }

    };

    try {

      const ret = RNFS.downloadFile(options);

      ret.promise.then(res => {

        //callback(null, Platform.OS === 'android' ? downloadDest : 'file://' + downloadDest)

        callback(null, 'file://' + downloadDest)

 

      }).catch(err => {

        callback(err)

      });

    }

    catch (e) {

      callback("error")

    }

 

  }, 

다음 항목 은 파일 업로드 기능 에 쓸 때 업로드 기능 을 계속 추가 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.