模板版本：v0.2.2

`react-native-camera-kit`

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-library/react-native-camera-kit Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @react-native-oh-tpl/react-native-camera-kit

yarn

yarn add @react-native-oh-tpl/react-native-camera-kit

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

camera example

import React, {useRef, useState} from 'react';
import {Text, StyleSheet, View, Button} from 'react-native';
import {CameraApi, CameraType,Camera} from 'react-native-camera-kit';

export const CameraDemo: React.FC = (): JSX.Element => {
  const nativeRef = useRef<CameraApi>(null);
  const [zoom, setZoom] = useState<number>(0);
  const [errorStr, setErrorStr] = useState<string>('');
  const [photo, setPhoto] = useState<string>('');

  const onError = (e: any) => {
    setErrorStr(e.nativeEvent.errorMessage);
  };

  const onZoom = (e: any) => {
    setZoom(e.nativeEvent.zoom);
  };

  const onPhoto = async () => {
    const result = await nativeRef.current?.capture();
    result && setPhoto(JSON.stringify(result));
  };

  return (
    <>
      <View>
        <Camera
          style={{width: '100%', height: 500}}
          ref={nativeRef}
          maxZoom={10}
          cameraType={CameraType.Back}
          flashMode={0}
          onError={onError}
          onZoom={onZoom}
        />
      </View>
      <View>
        <Button title="拍照" onPress={onPhoto} />
        <Text style={styles.text}>zoom:{zoom}</Text>
        <Text style={styles.text}>error:{errorStr}</Text>
        <Text style={styles.text}>photo:{photo}</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#000',
    marginTop: 10,
  },
});

scanCode example

import React, {useRef, useState} from 'react';
import {Text, StyleSheet, View} from 'react-native';
import {CameraApi, CameraType,Camera} from 'react-native-camera-kit';

export const ScanCodeDemo: React.FC = (): JSX.Element => {
  const nativeRef = useRef<CameraApi>(null);
  const [zoomStr, setZoomStr] = useState<number>(0);
  const [errorStr, setErrorStr] = useState<string>('');
  const [codeResult, setCodeResult] = useState<string>('');

  const onError = (e: any) => {
    setErrorStr(e.nativeEvent.errorMessage);
  };

  const onZoom = (e: any) => {
    setZoomStr(e.nativeEvent.zoom);
  };

  const onReadCode = (e: any) => {
    setCodeResult(JSON.stringify(e));
  };

  return (
    <>
      <View>
        <Camera
          style={{width: '100%', height: 400}}
          ref={nativeRef}
          maxZoom={50}
          cameraType={CameraType.Back}
          onError={onError}
          onZoom={onZoom}
          scanBarcode
          onReadCode={onReadCode}
          ratioOverlay="4:3"
        />
      </View>
      <View>
        <Text style={styles.text}>zoom:{zoomStr}</Text>
        <Text style={styles.text}>code:{codeResult}</Text>
        <Text style={styles.text}>error:{errorStr}</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#000',
    marginTop: 10,
  },
});

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 `oh-package.json` 添加 overrides字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法：

通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
直接链接源码。

方法一：通过 har 包引入 (推荐)

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-camera-kit": "file:../../node_modules/@react-native-oh-tpl/react-native-camera-kit/harmony/camera_kit.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

[!TIP] 如需使用直接链接源码，请参考直接链接源码说明

3.在 ArkTs 侧引入 RTNCameraKitView 组件

找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

  ...
+ import { RTNCameraKitView } from "@react-native-oh-tpl/react-native-camera-kit";

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
  ...
+ if (ctx.componentName === RTNCameraKitView.NAME) {
+   RTNCameraKitView({
+     ctx: ctx.rnComponentContext,
+     tag: ctx.tag,
+   })
+ }
...
}
...

在entry/src/main/ets/pages/index.ets中，如果当前文件中存在arkTsComponentNames数组(后续版本新增内容)，则需要在其中追加：RTNCameraKitView.NAME;

  ...
 const arkTsComponentNames: Array<string> = [..., RTNCameraKitView.NAME]; 
  ...

4.在 ArkTs 侧引入 RTNCameraKitPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

  ...
+ import { RTNCameraKitPackage } from "@react-native-oh-tpl/react-native-camera-kit/ts";

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RTNCameraKitPackage(ctx),
  ];
}

5.运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-library/react-native-camera-kit Releases

权限要求

以下权限中有system_basic 权限，而默认的应用权限是 normal ，只能使用 normal 等级的权限，所以可能会在安装hap包时报错9568289，请参考文档修改应用等级为 system_basic

在 entry 目录下的module.json5中添加权限

打开 entry/src/main/module.json5，添加：

...
"requestPermissions": [
+  {
+    "name": "ohos.permission.CAMERA",
+    "reason": "$string:camera_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.MICROPHONE",
+    "reason": "$string:microphone_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.APPROXIMATELY_LOCATION",
+    "reason": "$string:location_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  }
]

在 entry 目录下添加申请以上权限的原因

打开 entry/src/main/resources/base/element/string.json，添加：

...
{
  "string": [
+    {
+      "name": "camera_reason",
+      "value": "使用相机"
+    },
+    {
+      "name": "location_reason",
+      "value": "获取当前位置"
+    },
+    {
+      "name": "microphone_reason",
+      "value": "使用麦克风"
+    },
  ]
}

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Camera：相机组件

Name	Description	Type	Required	Platform	HarmonyOS Support
ref	Reference on the camera view	Ref	no	All	yes
style	Style to apply on the camera view	StyleProp<ViewStyle>	no	All	yes
flashMode	Camera flash mode. Default: `auto`	'on'`/`'off'`/`'auto'	no	All	yes
focusMode	Camera focus mode. Default: on	'on'`/`'off'	no	All	yes
zoomMode	Enable the pinch to zoom gesture. Default: on	'on'`/`'off'	no	All	yes
zoom	Control the zoom. Default: 1.0	Number	no	All	yes
maxZoom	Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max)	Number	no	All	yes
onZoom	Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}.	Function	no	All	yes
torchMode	Toggle flash light when camera is active. Default: off	'on'`/`'off'	no	All	yes
cameraType	Choose what camera to use. Default: `CameraType.	'front'/'back'	no	All	yes
onOrientationChange	Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value	Function	no	iOS	yes
onError	Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}.	Function	no	Android	yes
shutterPhotoSound	Android only. Enable or disable the shutter sound when capturing a photo. Default: `true`	Boolean	no	Android	yes
ratioOverlay	Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: '16:9'	String	no	iOS	yes
ratioOverlayColor	Any color with alpha. Default: '#ffffff77'	String	no	All	yes
resetFocusTimeout	Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds.	Number	no	All	yes
resetFocusWhenMotionDetected	Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true.	Boolean	no	iOS	no
resizeMode	Determines the scaling and cropping behavior of content within the view. cover (resizeAspectFill on iOS) scales the content to fill the view completely, potentially cropping content if its aspect ratio differs from the view. contain (resizeAspect on iOS) scales the content to fit within the view's bounds without cropping, ensuring all content is visible but may introduce letterboxing. Default behavior depends on the specific use case.	'cover' / 'contain'	no	iOS	no
onCaptureButtonPressIn	Callback when iPhone capture button is pressed in. Ex: onCaptureButtonPressIn={() => console.log("volume button pressed in")}	Function	no	iOS	yes
onCaptureButtonPressOut	Callback when iPhone capture button is released. Ex: onCaptureButtonPressOut={() => console.log("volume button released")}	Function	no	iOS	no

ScanCode：扫码组件

Name	Description	Type	Required	Platform	HarmonyOS Support
ref	Reference on the camera view	Ref	no	All	yes
style	Style to apply on the camera view	StyleProp<ViewStyle>	no	All	yes
flashMode	Get secret value	'on'`/`'off'`/`'auto'	no	All	yes
zoomMode	Enable the pinch to zoom gesture. Default: on	'on'`/`'off'	no	All	yes
zoom	Control the zoom. Default: 1.0	Number	no	All	yes
maxZoom	Maximum zoom allowed (but not beyond what camera allows). Default: undefined (camera default max)	Number	no	All	yes
onZoom	Callback when user makes a pinch gesture, regardless of what the zoom prop was set to. Returned event contains zoom. Ex: onZoom={(e) => console.log(e.nativeEvent.zoom)}.	Function	no	All	yes
torchMode	Toggle flash light when camera is active. Default: off	'on'`/`'off'	no	All	yes
cameraType	Choose what camera to use. Default: `CameraType.	'front'/'back'	no	All	no
onOrientationChange	Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value	Function	no	iOS	no
onError	Android only. Callback when camera fails to initialize. Ex: onError={(e) => console.log(e.nativeEvent.errorMessage)}.	Function	no	Android	yes
resetFocusTimeout	Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds.	Number	no	All	yes
scanThrottleDelay	Duration between scan detection in milliseconds. Default 2000 (2s)	Number	no	All	yes
scanBarcode	Enable barcode scanner. Default: `false`	boolean	no	All	yes
showFrame	Show frame in barcode scanner. Default: `false`	boolean	no	All	yes
laserColor	Color of barcode scanner laser visualization. Default: `red`	string	no	All	yes
frameColor	Color of barcode scanner frame visualization. Default: `yellow`	string	no	All	yes
onReadCode	Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)}	Function	no	All	yes

静态方法

Name	Description	Type	Required	Platform	HarmonyOS Support
capture	Capture image as JPEG.	Promise	No	All	Yes
requestDeviceCameraAuthorization	`AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false`	Promise	No	All	Yes
checkDeviceCameraAuthorizationStatus	`AVAuthorizationStatusAuthorized` returns `true` otherwise, returns `false`	Promise	All	Yes	Yes

遗留问题

不支持查询传感器旋转角度 issue#1
不支持使用前置相机进行扫码 issue#2
不能同时设置flashMode和torchMode属性 issue#3
暂不支持onCaptureButtonPressOut属性 issue#4
暂不支持resetFocusWhenMotionDetected属性 issue#5
暂不支持resizeMode属性 issue#6

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-native-camera-kit.md

react-native-camera-kit.md

`react-native-camera-kit`

安装与使用

npm

yarn

camera example

scanCode example

Link

1.在工程根目录的 `oh-package.json` 添加 overrides字段

2.引入原生端代码

3.在 ArkTs 侧引入 RTNCameraKitView 组件

4.在 ArkTs 侧引入 RTNCameraKitPackage

5.运行

约束与限制

兼容性

权限要求

在 entry 目录下的module.json5中添加权限

在 entry 目录下添加申请以上权限的原因

属性

静态方法

遗留问题

其他

开源协议

Files

react-native-camera-kit.md

Latest commit

History

react-native-camera-kit.md

File metadata and controls

react-native-camera-kit

安装与使用

npm

yarn

camera example

scanCode example

Link

1.在工程根目录的 oh-package.json 添加 overrides字段

2.引入原生端代码

3.在 ArkTs 侧引入 RTNCameraKitView 组件

4.在 ArkTs 侧引入 RTNCameraKitPackage

5.运行

约束与限制

兼容性

权限要求

在 entry 目录下的module.json5中添加权限

在 entry 目录下添加申请以上权限的原因

属性

静态方法

遗留问题

其他

开源协议

`react-native-camera-kit`

1.在工程根目录的 `oh-package.json` 添加 overrides字段