用相机拍照
现在是有趣的部分-添加功能与设备的相机使用电容拍照 摄像头API ．我们将从面向网页构建它开始，然后进行一些小的调整，使其适用于移动平台(iOS和Android)。
为此，我们将创建自己的自定义React钩子，用于管理图库中的照片。
如果你不熟悉React Hooks， 引入反应钩子 从React官方文档开始是一个很好的资源。
创建一个新文件
src /钩/ usePhotoGallery.ts
把它打开。
自定义钩子就是使用其他React钩子的函数。这就是我们要做的!我们将开始导入各种钩子和实用程序，我们将使用从React核心，离子反应钩子项目和电容器:betway东盟体育app
进口
｛
useState
，
useEffect
｝
从
“反应”
；
进口
｛
isPlatform
｝
从
“@betway东盟体育appionic /反应”
；
进口
｛
相机
，
CameraResultType
，
CameraSource
，
照片
，
｝
从
“@capacitor /相机”
；
进口
｛
文件系统
，
目录
｝
从
“@capacitor /文件系统”
；
进口
｛
存储
｝
从
“@capacitor /存储”
；
进口
｛
电容器
｝
从
“@capacitor /核心”
；接下来，创建一个名为usphotogallery的函数:
出口
函数
usePhotoGallery
（
）
｛
常量
takePhoto
＝
异步
（
）
= >
｛
常量
cameraPhoto
＝
等待
相机
．
getPhoto
（
｛
resultType
：
CameraResultType
．
Uri
，
源
：
CameraSource
．
相机
，
质量
：
One hundred.
，
｝
）
；
｝
；
返回
｛
takePhoto
，
｝
；
｝
我们的
usePhotoGallery
钩子暴露了一个名为takphoto的方法，该方法反过来调用Capactior的getPhoto方法。
注意这里的神奇之处:这里没有特定于平台的代码(网页、iOS或Android)!电容相机插件为我们抽象了这些，只留下一个方法调用-
getPhoto ()
——它会打开设备的摄像头，让我们拍照。
我们需要采取的最后一步是使用Tab2页面中的新钩子。回到Tab2。TSX并导入钩子:
进口
｛
usePhotoGallery
｝
从
“. . /钩/ usePhotoGallery”
；
函数组件中的return语句之前，访问
takePhoto
使用钩子的方法:
常量
Tab2
：
反应
．
足球俱乐部
＝
（
）
= >
｛
常量
｛
takePhoto
｝
＝
usePhotoGallery
（
）
；
// snip -剩下的代码
保存文件，如果还没有保存，则在浏览器中通过运行重新启动开发服务器
betway东盟体育app离子服务
．在“相册”选项卡上，单击“相机”按钮。如果您的计算机有任何类型的网络摄像头，则会出现一个模式窗口。有问题!
(你的自拍可能比我的好得多)
拍完照片后，它就消失了。我们仍然需要在我们的应用程序中显示它并保存它以供将来访问。
显示照片
首先，我们将创建一个新类型来定义Photo，它将保存特定的元数据。将以下照片界面添加到
usePhotoGallery.ts
文件，在main函数之外的某处:
出口
接口
UserPhoto
｛
filepath
：
字符串
；
webviewPath
?
：
字符串
；
｝
回到函数的顶部(就在调用
usePhotoGallery
，我们将定义一个状态变量来存储用Camera捕获的每张照片的数组。
常量
［
照片
，
setPhotos
］
＝
useState
<
UserPhoto
［
］
>
（
［
］
）
；
当相机拍完照片时，从电容器返回的结果camerphoto将存储在
照片
变量。我们想要创建一个新的photo对象并将其添加到photos state数组中。我们确保不会意外地通过创建一个新数组改变当前照片数组，然后调用
setPhotos
将数组存储到状态中。更新
takePhoto
方法，并在getPhoto调用之后添加以下代码:
常量
文件名
＝
新
日期
（
）
．
取得时间
（
）
+
“jpeg”
；
常量
newPhotos
＝
［
｛
filepath
：
文件名
，
webviewPath
：
cameraPhoto
．
webPath
，
｝
，
.．.
照片
，
］
；
setPhotos
（
newPhotos
）
；接下来，让我们从钩子中暴露照片数组。更新return语句以包含照片:
返回
｛
照片
，
takePhoto
，
｝
；回到Tab2组件中，访问照片:
常量
｛
照片
，
takePhoto
｝
＝
usePhotoGallery
（
）
；
将照片存储到主数组中，我们可以在屏幕上显示图像。添加一个
网格组件
这样，当照片被添加到图库中时，每张照片都会显示得很好，并在photos数组中循环遍历每张照片，添加一个Image组件(
< IonImg >
)为每个。点的
src
(来源)到照片的路径:
<
IonContent
>
<
IonGrid
>
<
IonRow
>
｛
照片
．
地图
（
（
照片
，
指数
）
= >
（
<
IonCol大小
＝
“6”
关键
＝
｛
指数
｝
>
<
IonImg src
＝
｛
照片
．
webviewPath
｝
/
>
<
/
IonCol
>
）
）
｝
<
/
IonRow
>
<
/
IonGrid
>
<
！
--
<
IonFab
>
标记
--
>
<
/
IonContent
>保存所有文件。在web浏览器中，单击Camera按钮并拍摄另一张照片。这一次，照片显示在图片库!
接下来，我们将添加将照片保存到文件系统的支持，以便稍后在应用程序中检索和显示照片。