模板版本：v0.4.0

react-native-camera

本项目基于 react-native-camera 开发。

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

1. 安装与使用

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

npm

npm install @react-native-ohos/react-native-camera

yarn

yarn add @react-native-ohos/react-native-camera

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

import * as React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from "@react-native-ohos/react-native-camera";

export function CameraExample() {
  const cameraRef = React.useRef<RNCamera>(null);

  const takePicture = () => {
    const camera = cameraRef.current;
    if (!camera) {
      return;
    }
    camera
      .takePictureAsync({ quality: 0.5 })
      .then((photoResult: any) => {
        console.log('takepicture result:' + (photoResult?.path ?? photoResult?.uri));
      })
      .catch((error: unknown) => {
        console.warn('takepicture failed:', error);
      });
  };

  return (
    <View style={styles.container}>
      <RNCamera
        ref={cameraRef}
        type="back"
        autoFocus="on"
        flashMode="off"
        videoStabilizationMode="off"
        style={styles.cameraPreview}
      />
      <TouchableOpacity style={styles.actionBtn} onPress={takePicture}>
        <Text style={styles.actionBtnText}>拍照</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  cameraPreview: { width: '100%', aspectRatio: 56 / 100 },
  actionBtn: {
    margin: 10,
    padding: 10,
    backgroundColor: '#1E90FF',
    borderRadius: 8,
    alignItems: 'center',
  },
  actionBtnText: { color: '#fff', fontSize: 16 },
});

export default {
  title: 'Camera',
  description: '使用 react-native-camera 拍照',
  examples: [
    {
      name: 'CameraExample',
      title: 'Camera Preview',
      description: '点击按钮调用相机拍照',
      render(): React.ReactNode {
        return <CameraExample />;
      },
    },
  ],
};

2. Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

"dependencies": {
    "@react-native-ohos/react-native-camera": "file:../../node_modules/@react-native-ohos/react-native-camera/harmony/reactNativeCamera.har"
  }

cd entry
ohpm install

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-camera/src/main/cpp" ./reactNativeCamera)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC rnoh_native_camera)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "NativeCameraPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<RNOHGeneratedPackage>(ctx),
+      std::make_shared<NativeCameraPackage>(ctx)
    };
}

...
+ import { ReactCameraView } from '@react-native-ohos/react-native-camera';

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

const arkTsComponentNames: Array<string> = [
  SampleView.NAME,
  GeneratedSampleView.NAME,
  PropsDisplayer.NAME,
+ ReactCameraView.NAME
  ];

  ... 
+ import { ReactNativeCameraPackage, FaceDectorPackage } from '@react-native-ohos/react-native-camera/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new ReactNativeCameraPackage(ctx),
+   new FaceDectorPackage(ctx)
  ];
}

2.6 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

3. 约束与限制

3.1 兼容性

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

在以下版本验证通过：

1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0.47 (API Version 20); IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.107;
3. RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

3.2 编译运行API要求

1. whiteBalance 属性需要在支持 API20+ 的工程编译，并在支持 API20+ 的 ROM 上运行，方可生效。

3.3 权限要求

在 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"
+    }
+  },
]

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

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

...
{
  "string": [
+    {
+      "name": "camera_reason",
+      "value": "使用相机"
+    },
+    {
+      "name": "microphone_reason",
+      "value": "使用麦克风"
+    },
  ]
}

4. 属性

RNCamera

camera

5. 遗留问题

• onFacesDetected能力无法实现 issue#1

6. 其他

• notAuthorizedView属性,pendingAuthorizationView属性是android独有的属性，申请授权时显示的UI，harmony已经提供授权时的弹窗。
• ratio是android独有的属性，在ios无效果 源库readme位置

7. 开源协议

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