Detaillierte Erläuterung der Anwendungsfälle des React-Native-FS-Plug-Ins

Dieses Mal werde ich Ihnen die Anwendungsfälle des React-Native-FS-Plug-Ins ausführlich erläutern Sind die tatsächlichen Fälle, werfen wir einen Blick darauf.

Das React-Native-FS-Plugin wird zum Hochladen und Herunterladen von Dateien verwendet. Es kann sowohl auf iOS als auch auf Android verwendet werden. Datei-Upload (nur iOS).

Installationsbefehl:

Führen Sie nach der Installation Folgendes aus:

npm install react-native-fs --save
//注意：如果react native版本是<0.40安装，使用此标签：
npm install react-native-fs@2.0.1-rc.2 --save

Fügen Sie in android/app/src/main/AndroidManifest.xml Android-Lese- und Schreibberechtigungen für Dateien hinzu

react-native link react-native-fs

Nach Abschluss der oben genannten Installationsvorgänge können Sie verschiedene Methoden dieses Plug-Ins verwenden. Spezifische Anwendungsbeispiele für jede Methode finden Sie unter dem Link:

<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. Im Projekt muss ich die Bilddatei herunterladen, nach dem Herunterladen auf die lokale Datei den Bildpfad abrufen und dann das Bild anzeigen. Verwenden Sie also die downloadFile-Methode. Kapselt einen aufrufbaren Dienst. Der Code lautet wie folgt:

Bei der Implementierung dieser Funktion können die von Android auf das lokale Gerät heruntergeladenen Bilder nicht angezeigt werden. Der Grund dafür ist, dass Android beim Aufrufen dieses Plug-Ins Informationen zur

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")
    }
 
  },

Schnittstellenüberprüfung

hinzufügen muss (falls vorhanden). Die Schnittstelle muss überprüft werden) (unten), wie dieses Problem gelöst werden kann Wenn beim Aufrufen des Plug-Ins „react-native-fs“ für die Datenschnittstelle Verifizierungsinformationen erforderlich sind, wird bei der Ausführung unter Android ein Fehler gemeldet, bei der Ausführung unter iOS treten jedoch keine Probleme auf. Der Grund dafür ist, dass die Schnittstelle über Verifizierungsinformationen verfügt, diese jedoch beim Aufruf dieses Plug-Ins nicht übergeben werden. Unter iOS werden die Verifizierungsinformationen automatisch hinzugefügt, während sie unter Android manuell festgelegt werden müssen.

Problemumgehung für diesen Fehler:

1. Speichern Sie beim Aufrufen der

-Anmeldeschnittstelle

das Cookie (das Cookie befindet sich in der Antwort) und fügen Sie es in die Header ein, wenn Sie „react-native-fs“ aufrufen. Der Code lautet wie folgt:

2. Wenn Sie „react-native-fs“ aufrufen, geben Sie den Code wie folgt ein:

_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);
      }
    );
  },

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Bitte achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

 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")
    }
 
  },

Empfohlene Lektüre:

js implementiert die Zeichenbeschränkung für chinesische Zeichen = zwei Zeichen

Verwendung von js zur Implementierung des Armaturenbretts im Auto

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle des React-Native-FS-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!