在移动端应用中，拍摄照片和视频是常见的需求。React Native 框架提供了一些基础的组件让我们可以在应用中使用摄像头，而 @nitrog7/react-native-camera 则进一步扩展了 React Native 的摄像头功能，为我们提供了更多的选项和功能。本文将详细介绍如何使用 @nitrog7/react-native-camera 这个 npm 包。
安装
在 React Native 项目的根目录下，使用以下命令安装 @nitrog7/react-native-camera：
npm install @nitrog7/react-native-camera
接着，还需要安装 react-native-vector-icons 这个包，如果已经安装过则可以跳过这一步，否则可以使用以下命令安装：
npm install react-native-vector-icons
接下来你需要在 iOS 项目中进行以下的配置：
- 打开 Xcode，点击到
Project Navigator，找到你的项目。 - 引入 RCTCameraRoll.h 文件，选中
Libraries下的RCTCameraRoll.xcodeproj后 Add Files to "Your Project Name"，选择 RCTCameraRoll.xcodeproj 中的 RCTCameraRoll 目录，并保证 "Copy items if needed" 未打勾。 - 点击
Build Phases，点击右上角的加号，选择New Copy Files Phase，并将Destination设为Frameworks。然后在你的项目中拖拽libRCTCameraRoll.a到新建的Copy Files中。 - 在
Link Binary With Libraries中添加如下两个框架：AVFoundation.framework，UIKit.framework
接着，在 Android 项目中，需要在 settings.gradle 文件中添加以下代码：
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/@nitrog7/react-native-camera/android')然后，在 build.gradle 文件中添加以下代码：
dependencies {
// ...
implementation project(':react-native-camera')
}最后，在 MainApplication.java 中添加以下代码：
-- -------------------- ---- -------
------ --------------------------------
------ ------------------------------------------------------
------ ------------------------------------
------ -----------------------------------
------ --------------------------------
-- ---
--------- ------------------ ------------- -
------ ----------------------------
--- ----
--- --------------------
--- ---------------------
--
-
使用
@nitrog7/react-native-camera 提供了方便的 API 让我们使用摄像头。首先需要在代码中引入组件：
import { RNCamera } from '@nitrog7/react-native-camera';接着，我们可以在 render 函数中使用 <RNCamera> 标签来渲染摄像头界面，例如：
-- -------------------- ---- -------
---------
----------- -- ----------- - -------
----------------------
--------------------
-----------------------------------
---------------------------------
------ ----------- -- --- --------
-------- --- ---- ---- ---------- -- --- ---- --------
--------------- -----
--------------- --------
--
--这里我们使用了 RNCamera 自带的一些属性，例如 ref 可以用来引用 RNCamera 的实例，style 用于设置摄像头界面的样式，而 type 用于设置摄像头。
我们可以调用 RNCamera 实例上的一些方法来控制摄像头的行为，例如启动和停止摄像头：
-- -------------------- ---- -------
-------------- - ----- -- -- -
-- ------------- -
----- ------- - -
------------ --
-------- ---------------------------------------
--
----- - ---- ----- - ----- - - ----- ---------------------------------
------------------
-
--
------------- - -- -- -
-- ------------- -
----------------------------
-
--这里我们调用了 recordAsync 和 stopRecording 方法来启动和停止摄像头。同时使用了一些选项来限制录像的最大时长和视频质量等。
总结
@nitrog7/react-native-camera 提供了方便的 API 来使用摄像头，并且具有很高的自定义能力。我们可以通过其提供的属性和方法来控制摄像头的行为，非常适合在 React Native 项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e2449f8