Explication détaillée des cas d'utilisation du plug-in React-Native-Fs

Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation du plug-in réagissez-native-fs Quelles sont les précautions lors de l'utilisation du plug-in réactif-native-fs Ici. sont les cas réels, jetons un coup d'œil.

Le plug-in React-native-fs est utilisé pour le téléchargement et le téléchargement de fichiers. Il peut être utilisé à la fois sur iOS et Android, pour le téléchargement de fichiers (iOS uniquement).

Commande d'installation :

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

Après l'installation, exécutez :

react-native link react-native-fs

Dans android/app/src/main/AndroidManifest.xml, ajoutez les autorisations de lecture et d'écriture Android sur les fichiers

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

Après avoir terminé les opérations d'installation ci-dessus, vous pouvez utiliser différentes méthodes de ce plug-in. Pour des exemples d'utilisation spécifiques de chaque méthode, veuillez consulter le lien : https://github.com/itinance/react-native. -fs. Dans le projet, je dois télécharger le fichier image, obtenir le chemin de l'image après le téléchargement en local, puis afficher l'image. Utilisez donc la méthode downloadFile. Encapsule un service appelable, le code est le suivant :

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

Lors de la mise en œuvre de cette fonction, les images téléchargées en local par Android ne peuvent pas être affichées. Après avoir consulté les informations pertinentes, la raison en est que lorsque Android appelle ce plug-in, il doit ajouter des informations de vérification de l'interface (si l'interface doit être vérifiée) (ci-dessous), comment résoudre ce problème

Lors de l'appel du plug-in react-native-fs, si l'interface de données nécessite des informations de vérification, une erreur sera signalée lors de l'exécution sur Android, mais il n'y aura aucun problème lors de l'exécution sur iOS. La raison en est que l'interface contient des informations de vérification, mais elles ne sont pas transmises lors de l'appel de ce plug-in. Sur iOS, les informations de vérification seront automatiquement ajoutées, tandis que sur Android, elles doivent être définies manuellement.

Solution de contournement pour cette erreur :

1. Lorsque vous appelez l' interface de connexion , enregistrez le cookie (le cookie est dans la réponse) et placez-le dans les en-têtes lors de l'appel de React-native-fs. Le code est le suivant :

<.>

_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. Lorsque vous appelez React-native-fs, mettez-le dans les en-têtes. Le code est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. , veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

js implémente une limite de caractères caractères chinois = deux caractères

Utiliser js pour implémenter un tableau de bord de voiture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!