介绍
@rjblopes/react-native-camera 是 React Native 社区中一个非常受欢迎的相机组件。它通过 Native 模块为应用程序提供相机功能，可以让开发人员方便地在应用程序中实现照片拍摄、视频录制等操作。
在本文中，我们将详细介绍如何使用这个 npm 包，包括如何添加它到你的工程中、如何配置和使用它提供的 API。
安装
在开始使用 @rjblopes/react-native-camera 之前，你需要先确保你的开发环境中已经安装了 Node.js、npm 和 React Native，以及具备 React Native 应用程序的基本开发经验。对于初学者，可以先学习 React Native 官方文档，熟悉 React Native 的开发方式和基本概念。
使用 npm 安装 @rjblopes/react-native-camera：
npm install @rjblopes/react-native-camera
或者使用 yarn：
yarn add @rjblopes/react-native-camera
完成安装后你需要重新编译应用程序，在 iOS 中使用 Xcode，在 Android 中使用 Android Studio。
配置
安卓平台
在项目下的 android/app/build.gradle 文件中添加以下依赖：
dependencies { // ... implementation project(':react-native-camera') implementation 'androidx.appcompat:appcompat:1.2.0' }在 android/settings.gradle 文件中添加以下配置：
include ':react-native-camera' project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/@rjblopes/react-native-camera/android')在项目下的 MainActivity 中添加 ReactPackage：
-- -------------------- ---- -------
------ ----------------------------------------------
------ ----- ------------ ------- ------------- -
-----
---------
--------- ------------------ ------------- -
------ ----------------- -------------------
--- ----------------- -- - ---
-
-----
-
iOS 平台
打开 Xcode 项目，选择 File -> Add Files to "YOUR_PROJECT_NAME"，将 ../../node_modules/@rjblopes/react-native-camera/ios/RNCamera 目录下的所有文件添加到你的项目中。
在 TARGETS -> YOUR_PROJECT_NAME -> Build Phases -> Link Binary With Libraries 中添加以下库：
- AVFoundation.framework
- UIKit.framework
- Foundation.framework
- CoreMedia.framework
- CoreVideo.framework
- QuartzCore.framework
在 TARGETS -> YOUR_PROJECT_NAME -> Build Settings -> Header Search Paths 中加入：
"$(SRCROOT)/../../node_modules/react-native-camera/ios/RNCamera"
在 Podfile 中加入以下依赖：
pod 'react-native-camera', :path => '../node_modules/@rjblopes/react-native-camera'
完成上述配置后，你的应用程序就已经可以使用 @rjblopes/react-native-camera 了。
使用
基本使用
在你的 React Native 应用程序中，你可以使用 @rjblopes/react-native-camera 提供的组件 RNCamera 来实现相机操作。RNCamera 提供的最基本操作为拍照，代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ----- ----------------- ---- - ---- ---------------
------ - -------- - ---- --------------------------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -------------------------
---------
---------------------
----------------------
---------------------------------
------ ----------- -- --- --------
-------- --- ---- ---- ---------- -- --- ---- --------
--------------- -----
--------------- ---------
--
---------------------------------- -------- -- -- -
----------------------
--
--
----------------- ------------------------------------- -----------------------
----- -------- --------- -- --- ---- -------
-------------------
-------
--
-
----------- - ----- -- -- -
-- ------------- -
----- ------- - - -------- ---- ------- ---- --
----- ---- - ----- --------------------------------------
----------------------
-
--
-
----- ------ - -------------------
---------- -
----- --
-------------- ---------
---------------- --------
--
-------- -
----- --
--------------- -----------
----------- ---------
--
-------- -
----- --
---------------- -------
------------- --
-------- ---
------------------ ---
---------- ---------
------- ---
--
---在上述代码中，我们首先导入了 RNCamera 组件并使用了该组件；然后在该组件中添加了相应的配置项；最后我们定义了拍照的函数 takePicture，该函数首先判断当前 camera 是否存在，如果存在则调用 takePictureAsync 函数来拍照，并将结果输出到控制台。
进阶使用
在 RNCamera 组件中，@rjblopes/react-native-camera 也提供了很多其他的 API，例如 Video 的录制、实时物体识别等功能。我们将通过以下示例，介绍一些相对高级的功能。
录制视频
-- -------------------- ---- ------- --- ------ ------- ----- --- ------- --------- - ------------------ - ------------- ----------- - ----- ---------- - - ------------ ------ -- - ----- --------------- - -- ------------ -- ----------------------- - --------------- ------------ ----- -- -- -- - ---------------------------- --- - - ----- ----------- - -- ------------- - --- - ----- ------- - ------------------------- -------- ----------------------------------------- ------------ --------- --- -- --------- - --------------- ------------ ---- --- ----- ---- - ----- -------- --------------- ------------ ----- --- ---------------------- - - ----- --- - ----------------- - - - -------- - ------ - ----- ------------------------- --------- ---------- -- - ----------- - ---- -- ---------------------- --------------------------------- ------ ----------- -- --- -------- -------- --- ---- ---- ---------- -- --- ---- -------- --------------- ----- --------------- --------- -- ---------------------------------- -------- -- -- - ---------------------- -- -- ----------------- ------------------------------------ ----- ----------------------- ----- ----------------------------- - ---------------- - -------------------- -- ------- ------------------- ------- -- - -在上述代码中，我们首先定义了两个函数，一个是 takeVideo 用来启动 video 的录制，另一个是 stopRecording 来停止录制。在 RNCamera 中，我们使用 recordAsync 来录制视频，并指定了录制的参数。同时，我们在 takeVideo 中将录制状态设置为 true，以便在 UI 上体现出来。
实时物体识别
-- -------------------- ---- ------- --- ----- -------------------- - ----- -------- - ----- -------------------------------------------- - --------- -------------------------------- --- ------ --------- - ------------ - ------ -- - -------------------------- -- - -------------------- ----- ----------- ------- ----- ------------- --- -- ----- --------- - ----- ------- - - -------- ---- ------- ---- -- ----- ---- - ----- -------------------------------------- ----- - --- - - ----- --- - --------------- -------------- ---- --- ----- ---------- - ----- ------------------ ------- ---------------------------------------------------------------------- - --------------- ------------------- -- ---------------- --------- - - ------ - -------- ----- -------------------------- -- --------- - - ----- -------------------------- ----------- --- -- - ----- ----------------- ----------- --- -- - ----- ---------------------- ----------- --- -- -- -- -- -- -- --------------- -------------- ----- --- ----- -------- - ---------------------------- ----------------------------------------- - ----- ------- - ------------------- - - -------- - ------ - ----- ------------------------- --------- ---------------------- ---------- -- - ----------- - ---- -- ----------------------------------- -------------------------------------------- -------------------------------------------------- -- ----------------- ---------------------------------- ----- ----------------------- ----- ---------------------------------------- ------- ------------------- ------- -- -在上述代码中，我们首先定义了两个函数，一个是 getFilesFromBase64，用来获取图片的 Base64 编码，另一个是 onVisionResp，用来处理 Google Vision API 的响应结果。在 capture 中，我们使用 takePictureAsync 获取照片的 Base64 编码，并将其作为参数发送给 Google Vision API，从而实现了实时物体识别功能。
在本文中，我们介绍了如何使用 @rjblopes/react-native-camera 实现相机操作。通过详细的安装和配置步骤，以及丰富的示例代码，我们希望读者可以更加深入地理解这个 npm 包，以及如何在实际开发中使用它提供的 API 实现不同的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa481e8991b448d81b3