Wie erhalte ich persistente Bild-URIs mit React Native DocumentPicker für effizientes automatisches Caching und Laden? (
Posted: 17 Jan 2025, 02:25
Ich entwickle eine React Native-App mit Expo auf Android, in der Benutzer Bilder mit dem React-Native-Document-Picker auswählen können. Das ultimative Ziel besteht darin, diese Bilder mit optimiertem Caching und Ressourcenmanagement effizient zu verwalten und anzuzeigen.
Anforderungen:
Hier ist der Code, mit dem ich experimentiere:
Zum Anzeigen von Bildern verwende ich derzeit die Standard-Bildkomponente von React Native, um die Funktionalität zu testen:
Beobachtungen:
Temporäre URIs: Die file://-Entsprechungen, die durch Bibliotheken wie abgeleitet wurden RNFetchBlob scheint nicht persistent zu sein und verursacht Probleme nach dem Neustart der App.
Fragen:
Wie kann ich ein persistentes URI-System implementieren, das nahtlos mit funktioniert? Expo Image ermöglicht effizientes Zwischenspeichern, Laden und Entladen von Bildern ohne Erstellen Sie doppelte Dateien?
Jede Anleitung zur Umsetzung dieses Arbeitsablaufs wäre sehr dankbar. Danke!
Anforderungen:
- Bilder auswählen: Ermöglicht Benutzern die Auswahl mehrerer Bilder mit DocumentPicker.
- Persistenter Zugriff: Rufen Sie einen persistenten URI ab oder ein Zeiger auf die Originaldatei, der über App-Neustarts hinweg gültig bleibt, ohne dass die Datei dupliziert wird unnötig.
- Effizientes Caching: Nutzen Sie einen Caching-Mechanismus (wie Expo Image), um Bilder dynamisch zu laden, zwischenzuspeichern und zu entladen und so eine manuelle Ressourcenverwaltung zu vermeiden.
Keine Duplikate, sofern nicht erforderlich: Vermeiden Sie das Erstellen unnötiger Dateikopien, es sei denn, dies ist ausdrücklich für Caching-Zwecke erforderlich.
Hier ist der Code, mit dem ich experimentiere:
Code: Select all
const images: DocumentPickerResponse[] = await DocumentPicker.pick({
type: [DocumentPicker.types.images],
allowMultiSelection: true,
mode: "open",
});
// Trying to resolve the full path
RNFetchBlob.fs.stat(image.uri).then((stats) => {
console.log("Source URI:", stats.path); // Expected this to provide a persistent file path
});
Code: Select all
- Verwendung von file:// URIs abgeleitet von RNFetchBlob.fs.stat() funktioniert zunächst, bietet jedoch keinen dauerhaften Zugriff, nachdem die App geschlossen und erneut geöffnet wurde.
- Ich bin noch nicht auf die Verwendung von Expo Image umgestiegen, da ich derzeit die Standardeinstellung teste Bildkomponente, um zunächst die grundlegende Funktionalität sicherzustellen.
Temporäre URIs: Die file://-Entsprechungen, die durch Bibliotheken wie abgeleitet wurden RNFetchBlob scheint nicht persistent zu sein und verursacht Probleme nach dem Neustart der App.
Fragen:
Wie kann ich ein persistentes URI-System implementieren, das nahtlos mit funktioniert? Expo Image ermöglicht effizientes Zwischenspeichern, Laden und Entladen von Bildern ohne Erstellen Sie doppelte Dateien?
Hinweise:
Das Kopieren aller Bilder in den App-Speicher würde zu unnötigen Duplikaten führen, was für eine große Galerie-App ineffizient ist. Ich möchte dies vermeiden, es sei denn, es ist unbedingt erforderlich.Jede Anleitung zur Umsetzung dieses Arbeitsablaufs wäre sehr dankbar. Danke!