@react-native-oh-tpl/react-native-camera-kit v14.0.0-beta15-0.0.3

模板版本：v0.2.2

!TIP(https://github.com/react-native-oh-library/react-native-camera-kit)

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-library/react-native-camera-kit Releases，并下载适用版本的 tgz 包。

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

!TIP # 处替换为 tgz 包的路径

npm

npm install @react-native-oh-tpl/react-native-camera-kit@file:#

yarn

yarn add @react-native-oh-tpl/react-native-camera-kit@file:#

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

!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(null); const zoom, setZoom = useState(0); const errorStr, setErrorStr = useState(''); const photo, setPhoto = useState('');

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 ( <> <Camera style={{width: '100%', height: 500}} ref={nativeRef} maxZoom={10} cameraType={CameraType.Back} flashMode={0} onError={onError} onZoom={onZoom} /> zoom:{zoom} error:{errorStr} photo:{photo} </> ); };

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

### scanCode example
``` js
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.引入原生端代码

目前有两种方法：

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

方法一：通过 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/rnoh_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

属性

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

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

Camera：相机组件

ScanCode：扫码组件

Method：静态方法

遗留问题

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

其他

开源协议

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