快速应用程序开发与实时重载
到目前为止，我们已经看到开发一个适用于任何地方的跨平台应用程序是多么容易。开发体验非常快，但如果我告诉你还有更快的方法呢?
<！--t.168.11.4.1-->我们可以使用Ionic CLIbetway东盟体育app 实时重载功能 在构建Ionic应用程序时提高我们的生产力。betway东盟体育app当激活时，当检测到应用程序中的变化时，Live Reload将重新加载浏览器和/或WebView。
<！--t.168.17.4.3-->生活重新加载
还记得
betway东盟体育app离子服务
？这就是在浏览器中工作的Live Reload，允许我们快速迭代。
我们也可以在iOS和Android设备上使用它。这在编写与本机插件交互的代码时特别有用。因为我们需要在设备上运行本地插件代码来验证它是否有效，所以有一种快速编写代码、构建和部署它的方法，然后测试它对保持我们的开发速度至关重要。
<！--t.168.32.4.9-->让我们使用Live Reload来实现照片删除，这是我们的photo Gallery功能所缺少的一部分。选择您选择的平台(iOS或Android)，并将设备连接到您的计算机。接下来，根据你选择的平台，在终端上运行任意一个命令:
<！--t.168.35.4.11-->
＄
betway东盟体育app离子帽运行ios -l——external
＄
betway东盟体育app离子帽运行android -l——外部Live Reload服务器将启动，选择的本地IDE将打开(如果还没有打开的话)。在IDE中，单击Play按钮将应用程序启动到您的设备上。
<！--t.168.50.4.15-->删除照片
随着Live Reload的运行和应用程序在您的设备上打开，让我们实现照片删除功能。开放
Tab2.tsx
然后导入
useState
来自React和
UserPhoto
从
usePhotoGallery
看点:
进口
反应
，
｛
useState
｝
从
“反应”
；
进口
｛
usePhotoGallery
，
UserPhoto
｝
从
“. . /钩/ usePhotoGallery”
；
//其他导入
接下来，引用
deletePhoto
函数，我们将很快创建它:
常量
｛
照片
，
takePhoto
，
deletePhoto
｝
＝
usePhotoGallery
（
）
；接下来，添加一个state值来存储关于要删除的照片的信息:
<！--t.168.160.4.27-->
常量
［
photoToDelete
，
setPhotoToDelete
］
＝
useState
<
UserPhoto
>
（
）
；
当用户单击图像时，我们将通过将状态值更改为照片来显示操作表。更新
< IonImg >
元素:
<
IonImg onClick
＝
｛
（
）
= >
setPhotoToDelete
（
照片
）
｝
src
＝
｛
照片
．
webviewPath
｝
/
>接下来，添加一个 IonActionSheet 对话框，选择删除所选照片或取消(关闭)对话框。我们将根据photoToDelete是否有值来设置isOpen属性。
<！--t.168.250.4.35-->
在JSX中，将以下组件放在结束之前
< / IonContent >
标签。
<
IonActionSheet isOpen
＝
｛
！
！
photoToDelete
｝
按钮
＝
｛
［
｛
文本
：
“删除”
，
角色
：
“破坏性的”
，
图标
：
垃圾
，
处理程序
：
（
）
= >
｛
如果
（
photoToDelete
）
｛
deletePhoto
（
photoToDelete
）
；
setPhotoToDelete
（
未定义的
）
；
｝
｝
｝
，
｛
文本
：
“取消”
，
图标
：
关闭
，
角色
：
“取消”
｝
］
｝
onDidDismiss
＝
｛
（
）
= >
setPhotoToDelete
（
未定义的
）
｝
/
>
在上面，我们添加了两个选项:
删除
调用
deletePhoto
函数(接下来将添加)和
取消
，当被赋予“取消”的角色时，它将自动关闭操作表。当模态消失时，设置onDidDismiss函数并将photoToDelete设置为undefined也很重要。这样，当单击另一张图像时，操作表会注意到photoToDelete值的变化。
接下来，我们需要实现deletePhoto方法
usePhotoGallery
钩。打开文件，在钩子中粘贴下面的函数:
常量
deletePhoto
＝
异步
（
照片
：
UserPhoto
）
= >
｛
//从Photos引用数据数组中删除这张照片
常量
newPhotos
＝
照片
．
过滤器
（
p
= >
p
．
filepath
= = !
照片
．
filepath
）
；
//通过覆盖现有的照片数组更新照片数组缓存
存储
．
集
（
｛
关键
：
PHOTO_STORAGE
，
价值
：
JSON
．
stringify
（
newPhotos
）
｝
）
；
//删除文件系统中的照片文件
常量
文件名
＝
照片
．
filepath
．
字符串的子串
（
照片
．
filepath
．
lastIndexOf
（
' / '
）
+
1
）
；
等待
文件系统
．
deleteFile
（
｛
路径
：
文件名
，
目录
：
目录
．
数据
｝
）
；
setPhotos
（
newPhotos
）
；
｝
；所选照片首先从“照片”数组中删除。然后，我们使用电容存储API来更新Photos数组的缓存版本。最后，我们使用Filesystem API删除实际的照片文件本身。
<！--t.168.645.4.47-->
确保返回
deletePhoto
函数，所以它是我们公开的钩子API的一部分:
返回
｛
deletePhoto
，
照片
，
takePhoto
｝
；保存该文件，然后再次点击照片并选择“删除”选项。这次，照片被删除了!使用Live Reload实现更快。
<！--t.168.676.4.53-->接下来是什么?
恭喜你!你创建了一个完整的跨平台图片库应用程序，可以在web、iOS和Android上运行。
<！--t.168.685.4.57-->从这里开始有很多路要走。试着再加一个2018必威体育下载 到应用程序，或更多 本机功能 ．前途无量。
<！--t.168.694.4.59-->快乐的应用程序构建!