React Native-Dateiverwaltung mit Parse Javascript SDK

dateien aus einer react native app speichern einführung in diesem leitfaden lernen sie, wie sie dateien in ihrer react native anwendung speichern und abrufen, indem sie das parse javascript sdk verwenden, um den back4app cloud speicher zu verwalten in der parse welt verwenden wir den typ parse file parse file um dateien zu verwalten nachdem sie die parse file parse file , speichern sie sie in der back4app cloud mit der save() save() methode sie sollten die datei immer mit einem anderen datenobjekt verknüpfen, damit sie diesen dateipfad beim abfragen des objekts abrufen können wenn sie keine verknüpfung herstellen, wird die datei gespeichert, aber sie werden sie in der cloud nicht finden ein weiterer wichtiger tipp ist, der datei einen namen mit einer dateierweiterung zu geben diese erweiterung ermöglicht es parse, den dateityp zu erkennen und entsprechend zu behandeln wir sollten auch erwähnen, dass jeder upload eine eindeutige kennung erhält, sodass es kein problem ist, mehrere dateien mit demselben namen hochzuladen der häufigste anwendungsfall einer react native app ist das speichern von bildern in diesem leitfaden erstellen sie eine demo galerie app, um bilder zu speichern und anzuzeigen der vollständige beispielcode für die in diesem tutorial erstellte app ist hier https //github com/templates back4app/react native demo gallery app fühlen sie sich frei, schritt für schritt mitzumachen oder direkt zum code zu springen bilder abspielen wenn sie ihre datei nicht mit einem datenobjekt verknüpfen, wird die datei zu einer verwaisten datei und sie können sie in der back4app cloud nicht finden ziel eine react native galerie app zu erstellen, die bilder mit parse javascript und back4app hochlädt und anzeigt voraussetzungen um dieses tutorial abzuschließen, benötigen sie schließen sie das installieren sie das parse sdk tutorial ab 1 abhängigkeiten installieren die arbeit mit dateien (d h das hochladen von fotos) in react native apps ist eine der häufigsten funktionen in diesem tutorial werden sie eine einfache galerie app erstellen, die bilder hochlädt und anzeigt sobald sie ein react native projekt erfolgreich mit back4app verbunden https //www back4app com/docs/parse sdk/react native sdk , gehen sie in das stammverzeichnis und installieren sie die folgende abhängigkeit für ios, installieren sie pods beachten sie, dass das automatische verlinken für react native v0 60+ v0 60+ , verfügbar ist, aber für informationen zur installation von react native image picker react native image picker älteren versionen, überprüfen sie die offizielle dokumentation hier https //github com/react native image picker/react native image picker nach der installation müssen sie den nsphotolibraryusagedescription nsphotolibraryusagedescription schlüssel zu ihrer info plist info plist hinzufügen, um dem benutzer zu erlauben, bilder/videos aus fotos auf ios auszuwählen auf android sind keine berechtigungen erforderlich, um fotos für die galerie auszuwählen 2 auswahl eines bildes aus der galerie als nächstes erstellen sie eine komponente, die die benutzeroberfläche und die logik zum auswählen eines bildes aus der galerie und zum hochladen davon umschließt erstellen sie in ihrem stammverzeichnis eine uploadingimage js uploadingimage js datei mit folgendem inhalt 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3&#x9; 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6&#x9; 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9&#x9; 10 async function upload() { 11 // todo implement this method 12 } 13 // this will open phone image library 14 function pickimage() { 15 launchimagelibrary( 16 { 17 mediatype 'photo', 18 includebase64 true, 19 maxheight 200, 20 maxwidth 200, 21 }, 22 (response) => { 23 // add selected image to the state 24 setimage(response); 25 }, 26 ); 27 } 28&#x9; 29 return ( 30 \<view> 31 \<button 32 onpress={pickimage} 33 title="pick an image from gallery" 34 color="#841584" /> 35 {image && \<image source={ {uri image uri} } style={styles currentimage}/>} 36&#x9; 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40&#x9; 41 }; 42&#x9; 43 const styles = stylesheet create({ 44 container { 45 height 400, 46 justifycontent 'center', 47 alignitems 'center', 48 }, 49 currentimage { 50 width 250, 51 height 250, 52 resizemode 'cover', 53 alignself 'center', 54 }, 55 }); 56&#x9; 57 export default uploadimage; die obige komponente rendert eine schaltfläche, die die bildbibliothek öffnet, wenn ein benutzer darauf klickt das ausgewählte bild zusammen mit einer hochladetaste wie sie sehen können, tut die hochladen hochladen methode nichts als nächstes werden sie ihr verhalten implementieren und sehen, wie man tatsächlich bilder in die back4app cloud hochlädt 3 ein bild hochladen der back4app speicher basiert auf parse file parse file und ermöglicht es ihnen, beliebige dateien wie dokumente, bilder, videos, musik und andere binäre daten zu speichern parse file parse file ist eine dienstklasse, die das parse javascript sdk bereitstellt, um den datei speicherprozess zu abstrahieren und es ihnen zu erleichtern um ein bild hochzuladen, müssen sie daher nur eine parse file parse file instanz erstellen und dann die speichermethode aufrufen indem sie dies tun, wird parse automatisch den rest für sie erledigen sie können die vollständige dokumentation über parse dateien hier https //docs parseplatform org/js/guide/#files lesen lassen sie uns das in unserer hochladen hochladen funktion tun 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5&#x9; 6 // 2 save the file 7 try { 8 const responsefile = await parsefile save(); 9 const gallery = parse object extend('gallery'); 10 const gallery = new gallery(); 11 gallery set('picture', responsefile); 12&#x9; 13 await gallery save(); 14 alert alert('the file has been saved to back4app '); 15 } catch (error) { 16 console log( 17 'the file either could not be read, or could not be saved to back4app ', 18 ); 19 } 20 } in short, the above snippet creates and saves the selected image, and after the save completes, we associate it with a parse object parse object called gallery gallery now you need to import and use the uploadimage uploadimage component in your app js app js 1 import react from 'react'; 2 import {safeareaview, stylesheet} from 'react native'; 3 // in a react native application 4 import parse from 'parse/react native js'; 5 import asyncstorage from '@react native community/async storage'; 6 import keys from ' /constants/keys'; 7 //before using the sdk 8 parse setasyncstorage(asyncstorage); 9 parse initialize(keys applicationid, keys javascriptkey); 10 parse serverurl = keys serverurl; 11&#x9; 12 import uploadimage from ' /uploadimage'; 13&#x9; 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21&#x9; 22 const styles = stylesheet create({ 23 container { 24 backgroundcolor '#f5f5f5', 25 flex 1, 26 }, 27 title { 28 fontsize 18, 29 textalign 'center', 30 fontweight 'bold', 31 }, 32 }); 33&#x9; 34 export default app; once you do that, you should be able to pick images from the gallery und erfolgreich bilder hochladen, indem sie die hochladen schaltfläche drücken 4 bilder anzeigen wir müssen die url des bildes abrufen, um den inhalt des bildes zu erhalten und es unseren benutzern anzuzeigen als nächstes werden sie eine komponente erstellen, um bilder aus unserer galerie galerie abzurufen und sie in einer flatlist anzuzeigen erstellen sie in ihrem stammverzeichnis eine gallery js gallery js datei mit folgendem inhalt 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3&#x9; 4 import parse from 'parse/react native js'; 5&#x9; 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8&#x9; 9 useeffect(() => { 10 const fetchimages = async () => { 11 let query = new parse query('gallery'); 12 const results = await query find(); 13 setimages(results); 14 }; 15 16 fetchimages(); 17 }, \[]); 18&#x9; 19 return ( 20 \<flatlist 21 style={styles container} 22 contentcontainerstyle={styles listcontent} 23 data={images} 24 horizontal={false} 25 numcolumns={3} 26 listemptycomponent={() => \<text>no images uploaded \</text>} 27 renderitem={({item}) => 28 \<image source={ {uri item get('picture') url()} } style={styles imageitem}/> 29 )} 30 keyextractor={(item) => item id} 31 />); 32 }; 33&#x9; 34 const styles = stylesheet create({ 35 container { 36 flex 1, 37 backgroundcolor '#f5f5f5', 38 }, 39 listcontent { 40 justifycontent 'center', 41 alignitems 'center', 42 }, 43 imageitem { 44 width 100, 45 height 100, 46 resizemode 'cover', 47 marginhorizontal 5, 48 marginvertical 5, 49 }, 50 }); 51&#x9; 52 export default gallery; die oben genannte komponente verwendet den useeffect useeffect hook, um bilder abzufragen, die in das gallery gallery objekt hochgeladen wurden, sobald es mit dem rendern fertig ist als nächstes müssen sie die komponente zu ihrer app js app js 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4&#x9; 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } wenn sie ihre app ausführen, sollten sie in der lage sein, die liste der hochgeladenen bilder so zu sehen 5 es ist fertig! an diesem punkt haben sie ihr erstes bild auf back4app hochgeladen und in einer react native anwendung angezeigt