@react-native-oh-tpl/react-native-camera-kit
v14.0.0-beta15-0.0.3
Published
A high performance, fully featured, rock solid camera library for React Native applications
Downloads
66
Readme
模板版本：v0.2.2
[!TIP] Github 地址
安装与使用
请到三方库的 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<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/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：相机组件
| 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 containscodeStringValue. Default: null. Ex: onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)} | Function | no | All | yes |
Method：静态方法
| 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) ，请自由地享受和参与开源。