React Native 是一个受欢迎的跨平台移动应用程序开发框架，但在拍摄照片和录制视频方面，它并没有提供很好的支持。幸运的是，有许多第三方库可用于填补这一空白，MyFave React Native Camera 就是其中一个。在本教程中，我们将详细介绍如何使用该库，以及如何在 React Native 应用程序中捕捉照片和视频。
安装
要使用 MyFave React Native Camera，需要先安装它。请使用以下命令安装：
npm install myfave-react-native-camera --save
使用
在安装后，可以将 Camera 组件导入到您的 React Native 应用程序中。
import { Camera } from 'myfave-react-native-camera';常规用法
MyFave React Native Camera 最基本的用法非常简单。只需将组件添加到屏幕上即可：
<Camera />
然而，这只会显示摄像头的内容。如果您需要捕获摄像头的内容，需要使用组件的 capture 方法。
捕获照片
使用 MyFave React Native Camera 捕获照片非常简单。在 Camera 组件上添加 ref 属性以访问组件实例并导入 CameraRoll，然后使用 capture 方法以将照片保存到设备相册：
-- -------------------- ---- ------- ------ - ------- ---------- - ---- ----------------------------- -- --- -- ------------- - ----- ------- - - -------- ---- ------- ---- -- ----- ---- - ----- ----------------------------- -------------------------------------- -
在上面的示例中，quality 是可选参数，表示捕获的照片质量，范围从 0 到 1。base64 参数是可选的，如果设置为 true，则返回 Base64 字符串，而不是 URI。
捕获视频
使用 MyFave React Native Camera 捕获视频也非常简单。您只需在 capture 方法中添加 type 参数以指示您要捕获视频，而不是照片：
if (this.camera) {
const options = { quality: 0.5, base64: true, type: 'video' };
const data = await this.camera.capture(options);
CameraRoll.saveToCameraRoll(data.uri);
}上面的代码将录制视频并将其保存到设备相册。
高级用法
MyFave React Native Camera 还支持许多高级用法，如预览和记录视频，检测人脸等。以下是一些示例代码：
预览和记录视频
-- -------------------- ---- -------
------ - ------- ----- - ---- -----------------------------
-- ---
----- - -
----------- -------
---------- ------
----------- ------
--------- ----
-
--------------- - ----- -- -- -
-- ---------------------- -
--------------------------
--------------- ----------- ---- ---
- ---- -
----- ------- - -
-------- -------
------------ - - --
--
----- ---- - ----- --------------------- ----- ----------------------------------- ---------- ---
--------------- --------- ----- ----------- ---- ---
-
-
------ -- -
------ -
----- -------- ----- - ---
-------
---------- -- ----------- - ----
----------------------------
-------- ----- - --
-
----- -------- ----- -- --------------- ----------- ----------- -------- ---
-
------------------- --
------
--------- ---- ----------------------- --
-------- ----- - --
---------------------------------------------
--
-
-------
---------
-------
--
-上述代码会在摄像头的预览视图下方添加一个按钮。每次单击按钮时，代码都会开始或停止录制视频。完成录制后，视频将显示在摄像头预览视图下方。
检测人脸
-- -------------------- ---- -------
------ - ------ - ---- -----------------------------
-- ---
----- - -
------ --
-
--------------- - ------- -- -
--------------- ------ ----------- ---
-
------ -- -
------ -
----- -------- ----- - ---
-------
---------- -- ----------- - ----
-------- ----- - --
--------------------------------------
------------------------------------------------------------
-----------------------------------------------------------------
--
-
------------------------- -- -
----- ----------------- ----------------- ----------- ---------------- ------ --------- ------ ----------------------- ------- ------------------------ ----- --------------------- ---- -----------------------
-------
--
-
-------
--
-上述代码会监测视频流中每一个人脸的信息，然后在想要的位置标志出来。
结论
在本教程中，我们介绍了 MyFave React Native Camera 的使用方法，包括捕捉照片和视频以及其他高级用法，如预览和记录视频以及检测人脸。通过使用该库，您可以很容易地将拍照和录制视频功能添加到您的应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4881e8991b448ebcc2