Удаление файлов в React Native с Back4App

11 мин

удаление файлов из приложения react native введение в этом руководстве вы узнаете лучший способ удаления файлов из облака back4app в приложениях react native для управления файлами приложения в back4app мы используем \parse file\ утилитный класс вы можете выполнять операции хранения, извлечения и удаления с помощью этого класса в предыдущем разделе, хранение файлов https //www back4app com/docs/js framework/react native files , мы рассмотрели хранение и извлечение файлов, создав демонстрационное приложение галереи на данный момент вы должны понимать, что после создания и сохранения \parse file\ , лучшей практикой является всегда связывать его с другим объектом данных это предотвратит создание сиротских файлов в вашем проекте и позволит вам находить и удалять их в облаке back4app \parse file\ предоставляет способ удаления файлов, но это операция, чувствительная к безопасности, которую не следует выполнять на стороне клиента в этом учебном пособии вы узнаете лучшую практику для удаления файлов вашего приложения цель добавить действие удаления изображения в демонстрационное приложение галереи react native предварительные условия чтобы завершить это учебное пособие, вам потребуется завершите хранение файлов https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi учебное пособие parse >= 4 2 0 1 настройка приложения в предыдущем разделе, хранение файлов https //www back4app com/docs/js framework/react native files , мы создали демонстрационное приложение галереи для загрузки и отображения фотографий пользователей для этого учебного пособия вы добавите кнопку удаления к каждому элементу изображения в компоненте \gallery js\ и выполните нашу операцию удаления если вы уже завершили кодирование демонстрационного приложения галереи, вы можете перейти к следующему шагу в качестве альтернативы вы можете клонировать кодовую базу приложения, чтобы следовать этому руководству чтобы клонировать проект, выполните \git clone https //github com/templates back4app/react native demo gallery app\ затем установите зависимости проекта 1 cd react native demo gallery app 2 3 # используя yarn 4 yarn install 5 6 # используя npm 7 npm install перед запуском не забудьте настроить свои учетные данные back4app, \app id\ и \javascriptkey\ , в методе \initialize\ для получения информации о настройке учетных данных приложения смотрите установить parse sdk https //www back4app com/docs/js framework/react native cli наконец, запустите приложение react native 1 # для android 2 npx react native run android 3 4 # для ios 5 npx react native run ios 2 создание кнопки удаления в приложении галереи компонент \gallery js\ отображает список изображений из вашего облачного проекта back4app далее вы создадите и добавите кнопку к каждому элементу изображения в текущем списке откройте файл \gallery js\ и добавьте следующее содержимое 1 import react, {usestate, useeffect} from 'react'; 2 import {text, view, image, flatlist, stylesheet, button, alert} from 'react native'; 3 import parse from 'parse/react native js'; 4	 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7	 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14	 15 fetchimages(); 16 }, \[]); 17	 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21	 22 return ( 23 \<flatlist 24 style={styles container} 25 contentcontainerstyle={styles listcontent} 26 data={images} 27 horizontal={false} 28 numcolumns={3} 29 listemptycomponent={() => \<text>no images uploaded \</text>} 30 renderitem={({item}) => ( 31 \<view> 32 \<image 33 source={ {uri item get('picture') url()} } 34 style={styles imageitem} 35 /> 36 \<button 37 title="delete" 38 color="red" 39 onpress={() => ondeleteimage(item id)} 40 /> 41 \</view> 42 )} 43 keyextractor={(item) => item id} 44 />); 45	 46 }; 47	 48 const styles = stylesheet create({ 49 container { 50 flex 1, 51 backgroundcolor '#f5f5f5', 52 }, 53 listcontent { 54 justifycontent 'center', 55 alignitems 'center', 56 }, 57 imageitem { 58 width 100, 59 height 100, 60 resizemode 'cover', 61 marginhorizontal 5, 62 marginvertical 5, 63 }, 64 }); 65 export default gallery; мы реорганизовали функцию renderitem, добавив кнопку удаления ко всем отображаемым изображениям однако событие нажатия кнопки все еще не имеет реализованной функциональности вы сделаете это на следующем шаге 3 создание облачной функции удаления изображения вы узнали, что файл всегда должен быть связан с объектом данных на хранение файлов https //www back4app com/docs/js framework/react native files непривязка файлов к объектам данных приведет к появлению «сиротских» файлов эти файлы недоступны внутри вашего приложения как только вы не можете их найти, вы также не можете удалить их из вашего приложения вы можете удалить их только с помощью опции удалить файлы на панели управления back4app процесс удаления состоит в том, чтобы сначала найти файл, а затем удалить его в parse метод \destroy\ используется для удаления ссылочных файлов однако использование его на стороне клиента небезопасно, так как это требует \masterkey\ когда вы создаете приложение react native, все ваши ключи объединены, поэтому любой может провести реверс инжиниринг, декомпилировать ваше приложение или перехватить ваш сетевой трафик с их устройства, чтобы найти ваш \masterkey\ использование мастер ключа позволяет вам обойти все механизмы безопасности вашего приложения, такие как разрешения на уровне классов https //docs parseplatform org/js/guide/#class level permissions и acl https //docs parseplatform org/js/guide/#object level access control вы можете найти больше информации о лучших практиках безопасности parse здесь https //blog back4app com/parse server security/ лучший способ удалить файлы сделать это на стороне сервера, используя функцию облачного кода https //www back4app com/docs/get started/cloud functions в нашем приложении галереи мы создадим облачную функцию для этого давайте создадим файл \main js\ с следующей облачной функцией 1 parse cloud define('deletegallerypicture', async (request) => { 2 const {image id} = request params; 3 const gallery = parse object extend('gallery'); 4 const query = new parse query(gallery); 5 try { 6 const image = await query get(image id); 7 const picture = image get('picture'); 8	 9 await picture destroy({usemasterkey true}); 10 await image destroy(); 11 return 'image removed '; 12 } catch (error) { 13 console log(error); 14 throw new error('error deleting image'); 15 } 16 }); для простоты мы будем использовать панель управления для загрузки облачных функций напрямую откройте ваше приложение \панель управления\ на сайт back4app https //www back4app com/ и нажмите на \core\ , затем \облачные функции кода\ загрузите \main js\ файл в корень папки \cloud/\ разверните функцию на сервере back4app через несколько секунд ваша облачная функция кода будет доступна для вызова через rest или parse sdk 4 вызов функции удаления облака из вашего приложения после успешного развертывания вашей функции облачного кода back4app, реализуйте действие для кнопки удаления, когда пользователь нажимает кнопку удаления в нашем галерейном приложении 1 // triggers on hitting delete 2 async function ondeleteimage(image id) { 3 try { 4 const params = {image id}; 5 const result = await parse cloud run('deletegallerypicture', params); 6 alert alert(result); 7 } catch (error) { 8 console log('delete error ', error); 9 } 10 } 11 теперь, когда вы нажимаете на удаление, ваше приложение вызовет \deletegallerypicture\ облачную функцию, которая успешно удалит изображение 5 удаление файлов в некоторых ситуациях, когда вы потеряли след ваших файлов приложения, вам нужно удалить файлы из вашей панели управления это обычно происходит, когда вы создаете «сиротские» файлы, упомянутые в этой статье для получения информации о том, как очистить файлы вашего приложения попробуйте общие вопросы о файлах back4app https //help back4app com/hc/en us/articles/360002327652 how to delete files completely или посмотрите документацию по настройкам приложения https //www back4app com/docs/parse dashboard/app settings готово! на этом этапе вы успешно развернули функцию облачного кода и узнали, как удалить изображение в приложении react native