在React Native中删除Back4App文件的技术指南

从 react native 应用中删除文件 介绍 在本指南中，您将学习如何在 react native 应用中从 back4app 云中删除文件的最佳方法。 为了管理 back4app 中的应用文件，我们使用 parse file parse file 工具类。您可以使用此类执行存储、检索和删除操作。在上一节中， https //www back4app com/docs/js framework/react native files , 我们通过创建一个演示画廊应用程序来介绍文件的存储和检索。 此时，您应该知道，在创建和保存一个 parse file parse file 后，最佳实践是始终将其与另一个数据对象关联。这将防止在您的项目中创建孤立文件，并使您能够在 back4app 云中找到并删除它们。 parse file 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 gallery js 组件中为每个图像项添加删除按钮来扩展此应用，并执行我们的删除操作。 如果您已经完成了演示画廊应用的编码，那么您可以跳到下一步。 或者，您可以克隆应用程序的代码库以跟随本教程。 要克隆项目，请运行 git clone https //github com/templates back4app/react native demo gallery app 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 凭据， 应用程序 id 应用程序 id 和 javascriptkey javascriptkey , 在 初始化 初始化 方法中。有关应用程序凭据设置的信息，请参见 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 gallery js 组件从您的 back4app 云项目中渲染图像列表。接下来，您将为当前列表中的每个图像项创建并添加一个按钮。 打开 gallery js 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&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 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&#x9; 46 }; 47&#x9; 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 destroy 方法用于删除引用的文件。然而，在客户端使用它并不安全，因为它需要 masterkey masterkey 。 当你构建一个react native应用时，所有的密钥都被捆绑在一起，因此，任何人都可以逆向工程、反编译你的应用或从他们的设备代理你的网络流量以找到你的 masterkey masterkey 。使用主密钥允许你绕过应用的所有安全机制，例如 https //docs parseplatform org/js/guide/#class level permissions 和 https //docs parseplatform org/js/guide/#object level access control 。你可以在 https //blog back4app com/parse server security/ 找到有关parse安全最佳实践的更多细节。 删除文件的最佳方法是在服务器端使用 https //www back4app com/docs/get started/cloud functions 。在我们的画廊应用中，我们将为此创建一个云代码函数。 让我们创建一个 main js 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&#x9; 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 }); 为了简单起见，我们将使用仪表板直接上传云函数： 打开您的应用 仪表板 仪表板 在 https //www back4app com/ 并点击 核心 核心 ，然后 云代码函数 云代码函数 。 上传 main js main js 文件到 cloud/ 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 deletegallerypicture 云函数，该函数将成功删除一张图片： 5 清理文件 在某些情况下，当您失去对应用程序文件的跟踪时，您需要从仪表板中删除文件。这通常发生在您创建了本文中提到的孤立文件时。 有关如何清理您的应用程序文件的信息： 尝试 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 应用中删除一张图片。