Создание и загрузка файлов в React Native с Back4App

сохранение файлов из приложения react native введение в этом руководстве вы узнаете, как хранить и извлекать файлы в вашем приложении react native, используя parse javascript sdk для управления облачным хранилищем back4app в мире parse мы используем тип parse file parse file для управления файлами после создания parse file parse file , вы сохраните его в облаке back4app, используя метод save() save() вы всегда должны связывать файл с другим объектом данных, чтобы вы могли извлечь этот путь к файлу при запросе объекта если вы не свяжете, файл будет сохранен, но вы не сможете найти его в облаке еще один важный совет — дать файлу имя с расширением это расширение позволяет parse определить тип файла и обработать его соответствующим образом также стоит упомянуть, что каждое загрузка получает уникальный идентификатор, поэтому нет проблем с загрузкой нескольких файлов с одинаковым именем наиболее распространенный случай использования приложения react native — это хранение изображений в этом руководстве вы создадите демонстрационное приложение галереи для хранения и отображения изображений полный образец кода для созданного приложения в этом учебнике доступен здесь https //github com/templates back4app/react native demo gallery app не стесняйтесь следовать пошагово или сразу перейти к коду играя с изображениями если вы не свяжете ваш файл с объектом данных, файл станет сиротой, и вы не сможете найти его в облаке back4app цель создать приложение галереи react native, которое загружает и отображает изображения с использованием parse javascript и back4app предварительные требования чтобы завершить этот учебник, вам потребуется завершите установку parse sdk учебник 1 установка зависимостей работа с файлами (т е загрузка фотографий) в приложениях react native является одной из самых распространенных функций в этом руководстве вы создадите простое приложение галерею, которое загружает и отображает изображения как только у вас будет успешно подключенный проект react native к back4app https //www back4app com/docs/parse sdk/react native sdk , перейдите в его корневой каталог и установите следующую зависимость для ios установите pods обратите внимание, что авто связывание доступно для react native v0 60+ v0 60+ , но для информации о установке react native image picker react native image picker более старых версий, ознакомьтесь с официальной документацией здесь https //github com/react native image picker/react native image picker после установки вам нужно будет добавить ключ nsphotolibraryusagedescription nsphotolibraryusagedescription в ваш info plist info plist для разрешения пользователю выбирать изображение/видео из фотографий на ios на android не требуются разрешения для выбора фотографий для галереи 2 выбор изображения из галереи далее вы создадите компонент, который обернет пользовательский интерфейс и логику для выбора изображения из галереи и его загрузки в вашем корневом каталоге создайте файл uploadingimage js uploadingimage js со следующим содержимым 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; вышеуказанный компонент отображает кнопку, которая открывает библиотеку изображений, когда пользователь нажимает выбранное изображение вместе с кнопкой загрузки как вы можете видеть, метод загрузки метод загрузки ничего не делает далее вы реализуете его поведение и увидите, как на самом деле загружать изображения в облако back4app 3 загрузка изображения хранение back4app основано на parse file parse file , и позволяет вам хранить любые файлы, такие как документы, изображения, видео, музыка и любые другие двоичные данные parse file parse file это утилитный класс, который предоставляет parse javascript sdk для абстрагирования процесса хранения файлов и упрощения его для вас поэтому, чтобы загрузить изображение, вам нужно только создать экземпляр parse file parse file и затем вызвать метод сохранения делая это, parse автоматически сделает остальное за вас вы можете прочитать полную документацию о файлах parse здесь https //docs parseplatform org/js/guide/#files давайте сделаем это в нашей функции загрузки функции загрузки 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 } вкратце, приведенный выше фрагмент создает и сохраняет выбранное изображение, и после завершения сохранения мы связываем его с parse object parse object под названием gallery gallery теперь вам нужно импортировать и использовать uploadimage uploadimage компонент в вашем 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; как только вы это сделаете, вы сможете выбирать изображения из галереи и успешно загружайте изображения, нажимая кнопку загрузки 4 отображение изображений нам нужно получить url изображения, чтобы извлечь содержимое изображения и отобразить его нашим пользователям далее вы создадите компонент для запроса изображений из нашего галерея галерея и отображения их на flatlist в вашем корневом каталоге создайте файл gallery js gallery js со следующим содержимым 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; вышеуказанный компонент использует useeffect useeffect хук для запроса изображений, загруженных в галерея галерея объект, как только он завершит рендеринг далее вам нужно будет добавить компонент в ваш 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 } когда вы запустите ваше приложение, вы должны увидеть список загруженных изображений, как это 5 готово! на этом этапе вы загрузили свое первое изображение на back4app и отобразили его в приложении react native