React Native: Almacenar y Mostrar Imágenes con Parse

guardar archivos de una aplicación react native introducción en esta guía, aprenderás cómo almacenar y recuperar archivos en tu aplicación react native utilizando el sdk de javascript de parse para gestionar el almacenamiento en la nube de back4app en el mundo de parse, usamos el tipo parse file parse file para gestionar archivos después de crear el parse file parse file , lo almacenarás en la nube de back4app utilizando el save() save() método siempre debes asociar el archivo con otro objeto de datos para que puedas recuperar esta ruta de archivo al consultar el objeto si no asocias, el archivo se almacenará, pero no lo encontrarás en la nube otro consejo importante es darle un nombre al archivo que tenga una extensión de archivo esta extensión permite a parse determinar el tipo de archivo y manejarlo en consecuencia también debemos mencionar que cada carga recibe un identificador único, por lo que no hay problema en cargar múltiples archivos con el mismo nombre el caso de uso más común de una aplicación react native es almacenar imágenes en esta guía, construirás una aplicación de galería de demostración para almacenar y mostrar imágenes el código de muestra completo para la aplicación creada en este tutorial es aquí https //github com/templates back4app/react native demo gallery app siéntete libre de seguir paso a paso o saltar directamente al código reproduciendo imágenes si no asocias tu archivo a un objeto de datos, el archivo se convertirá en un archivo huérfano y no podrás encontrarlo en la nube de back4app objetivo crear una aplicación de galería react native que suba y muestre imágenes utilizando parse javascript y back4app requisitos previos para completar este tutorial, necesitarás completar el tutorial de instalación del sdk de parse 1 instalando dependencias trabajar con archivos (es decir, subir fotos) en aplicaciones de react native es una de las características más comunes en este tutorial, construirás una aplicación de galería simple que sube y muestra imágenes una vez que tengas un proyecto de react native conectado exitosamente con back4app https //www back4app com/docs/parse sdk/react native sdk , ve a su directorio raíz e instala la siguiente dependencia para ios, instala pods ten en cuenta que el auto vinculado está disponible para react native v0 60+ v0 60+ , pero para información sobre la instalación de react native image picker react native image picker versiones anteriores, consulta la documentación oficial aquí https //github com/react native image picker/react native image picker después de instalar, necesitarás agregar la nsphotolibraryusagedescription nsphotolibraryusagedescription clave a tu info plist info plist para permitir que el usuario seleccione imágenes/videos de fotos en ios en android no se requieren permisos para seleccionar fotos de la galería 2 seleccionando una imagen de la galería a continuación, construirás un componente que envuelve la interfaz de usuario y la lógica para seleccionar una imagen de la galería y subirla en tu directorio raíz, crea un uploadingimage js uploadingimage js archivo con el siguiente contenido 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; el componente anterior renderiza un botón que abre la biblioteca de imágenes cuando un usuario hace clic la imagen seleccionada junto con un botón de carga como puedes ver, el carga carga método no hace nada a continuación, implementarás su comportamiento y verás cómo cargar imágenes en la nube de back4app 3 cargando una imagen el almacenamiento de back4app se basa en parse file parse file y te permite almacenar cualquier archivo como documentos, imágenes, videos, música y cualquier otro dato binario parse file parse file es una clase de utilidad que proporciona el sdk de javascript de parse para abstraer el proceso de almacenamiento de archivos y facilitarte el trabajo por lo tanto, para cargar una imagen, solo necesitarás crear una parse file parse file instancia y luego llamar al método de guardar al hacer esto, parse hará automáticamente el resto por ti puedes leer la documentación completa sobre parse files aquí https //docs parseplatform org/js/guide/#files hagámoslo en nuestra carga carga función 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 } en resumen, el fragmento anterior crea y guarda la imagen seleccionada, y después de que se complete el guardado, la asociamos con un parse object parse object llamado gallery gallery ahora necesitas importar y usar el uploadimage uploadimage componente en tu 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; una vez que hagas eso, deberías poder seleccionar imágenes de la galería y subir imágenes con éxito al presionar el botón de carga 4 mostrando imágenes necesitamos obtener la url de la imagen para recuperar el contenido de la imagen y mostrarlo a nuestros usuarios a continuación, construirás un componente para consultar imágenes de nuestra galería galería y mostrarlas en un flatlist en tu directorio raíz, crea un gallery js gallery js archivo con el siguiente contenido 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; el componente anterior utiliza el useeffect useeffect hook para consultar las imágenes subidas a la galería galería object una vez que termina de renderizar a continuación, necesitarás agregar el componente a tu 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 } cuando ejecutes tu app, deberías poder ver la lista de imágenes subidas así 5 ¡está hecho! en este punto, has subido tu primera imagen en back4app y la has mostrado en una aplicación de react native