React-Native: Convertit l'URL de l'image en chaîne base64

Je suis en train de construire une réagir application native qui a besoin de stocker des images en base64 format de chaîne de caractères pour l'affichage hors connexion capacités.

Ce que la bibliothèque /la fonction serait de me donner le meilleur résultat pour stocker l'image en base64 de la chaîne? en supposant que mon url est "http://www.example.com/image.png".

Aussi, je dois faire des requête http pour l'obtenir avant de les stocker comme une chaîne de caractères? ma logique dit oui, mais à réagir natif, vous pouvez charger des images sur le <Image> composant sans demander d'abord à partir du serveur.

Quelle serait la meilleure option pour cela dans réagissent natif?

source d'informationauteur Avishay Bar

  1. 15

    - Je utiliser réagir-native-fetch-gouttefondamentalement, il fournit beaucoup de système de fichiers et les fonctions de réseau de faire le transfert de données assez facile.

    import RNFetchBlob from "react-native-fetch-blob";
const fs = RNFetchBlob.fs;
let imagePath = null;
RNFetchBlob.config({
  fileCache: true
})
  .fetch("GET", "http://www.example.com/image.png")
  //the image is now dowloaded to device's storage
  .then(resp => {
    //the image path you can use it directly with Image component
    imagePath = resp.path();
    return resp.readFile("base64");
  })
  .then(base64Data => {
    //here's base64 encoded image
    console.log(base64Data);
    //remove the file from storage
    return fs.unlink(imagePath);
  });

    source Projet Wiki

  2. 8
     ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
      ImageStore.getBase64ForTag(imageURI, (base64Data) => {
          //base64Data contains the base64string of the image
      }, (reason) => console.error(reason));
 }, (reason) => console.error(reason));
  3. 4

    Pour convertir une image en base64 dans Réagissent natif, le FileReader utilitaire est utile:

    const fileReader = new FileReader();
fileReader.onload = fileLoadedEvent => {
  const base64Image = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(imagepath);

    Cela nécessite réagir-fichiers natifs.

    Une autre alternative, et probablement la solution idéale est d'utiliser NativeModules. Le Moyen de l'article montre comment. Il nécessite la création d'un le module natif.

    NativeModules.ReadImageData.readImage(path, (base64Image) => {
  //Do something here.
});
  4. 1

    Il ya une meilleure façon:
    L'installation de cette réagir-native-fs, SI vous ne l'avez pas déjà.

    import RNFS from 'react-native-fs';

RNFS.readFile(this.state.imagePath, 'base64')
.then(res =>{
  console.log(res);
});