遵照原库使用class component

.gitignore

@@ -34,3 +34,4 @@ node_modules/
 npm-debug.log
 package-lock.json
 yarn.lock
+lib

harmony/rnoh_signature_capture/BuildProfile.ets

@@ -1,6 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '0.4.11-0.0.2';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
 export default class BuildProfile { 
-	static readonly HAR_VERSION = '0.4.12-0.0.1';
-	static readonly BUILD_MODE_NAME = 'debug';
-	static readonly DEBUG = true;
-	static readonly TARGET_NAME = 'default';
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
 }

harmony/rnoh_signature_capture/src/main/ets/SignatureCaptureArk.ets

@@ -39,16 +39,16 @@ const prefix = 'data:image/png;base64,';
 
 @Component
 export struct SignatureCaptureArkView {
-  public static readonly NAME = RNC.SignatureCaptureArkView.NAME
+  public static readonly NAME = RNC.RSSignatureArkView.NAME
   public ctx!: RNComponentContext
   public tag: number = 0;
   // canvas
   private setting: RenderingContextSettings = new RenderingContextSettings(true);
   private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting);
   sign = new SmoothSignature(this.context2D, {});
-  @State private descriptorWrapper: RNC.SignatureCaptureArkView.DescriptorWrapper = {
-  } as RNC.SignatureCaptureArkView.DescriptorWrapper
-  private eventEmitter: RNC.SignatureCaptureArkView.EventEmitter | undefined = undefined
+  @State private descriptorWrapper: RNC.RSSignatureArkView.DescriptorWrapper = {
+  } as RNC.RSSignatureArkView.DescriptorWrapper
+  private eventEmitter: RNC.RSSignatureArkView.EventEmitter | undefined = undefined
   private cleanUpCallbacks: (() => void)[] = []
   private logger!: RNOHLogger;
   private windowClass!: window.Window;
@@ -60,18 +60,18 @@ export struct SignatureCaptureArkView {
    // 初始化logger
    this.logger = this.ctx.logger.clone('SignatureCapture');
 
-   this.eventEmitter = new RNC.SignatureCaptureArkView.EventEmitter(this.ctx.rnInstance, this.tag)
+   this.eventEmitter = new RNC.RSSignatureArkView.EventEmitter(this.ctx.rnInstance, this.tag)
 
-   this.onDescriptorWrapperChange(this.ctx.descriptorRegistry.findDescriptorWrapperByTag<RNC.SignatureCaptureArkView.DescriptorWrapper>(this.tag)!)
+   this.onDescriptorWrapperChange(this.ctx.descriptorRegistry.findDescriptorWrapperByTag<RNC.RSSignatureArkView.DescriptorWrapper>(this.tag)!)
 
    this.cleanUpCallbacks.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
       (_descriptor, newDescriptorWrapper) => {
         this.logger.info('signature capture descriptor change!');
-        this.onDescriptorWrapperChange(newDescriptorWrapper! as RNC.SignatureCaptureArkView.DescriptorWrapper)
+        this.onDescriptorWrapperChange(newDescriptorWrapper! as RNC.RSSignatureArkView.DescriptorWrapper)
       }
    ));
 
-   const cmdReceiver = new RNC.SignatureCaptureArkView.CommandReceiver(this.ctx.componentCommandReceiver, this.tag);
+   const cmdReceiver = new RNC.RSSignatureArkView.CommandReceiver(this.ctx.componentCommandReceiver, this.tag);
 
    this.cleanUpCallbacks.push(cmdReceiver.subscribe("saveImage", (argv) => {
      this.logger.info('==== command saveImage ====' + JSON.stringify(argv));
@@ -127,7 +127,7 @@ export struct SignatureCaptureArkView {
     this.sign.color = this.descriptorWrapper.props.strokeColor.toRGBAString();
   }
 
-  private onDescriptorWrapperChange(descriptorWrapper: RNC.SignatureCaptureArkView.DescriptorWrapper) {
+  private onDescriptorWrapperChange(descriptorWrapper: RNC.RSSignatureArkView.DescriptorWrapper) {
     this.logger.info('descriptor change!');
     this.descriptorWrapper = descriptorWrapper;
     this.setProps();
@@ -269,21 +269,19 @@ export struct SignatureCaptureArkView {
   }
 
   build() {
-    Column() {
-      RNViewBase({ ctx: this.ctx, tag: this.tag }) {
-        Canvas(this.context2D)
-          .onReady(() => {
-            this.canvasReady();
-          }).onTouch((event: TouchEvent) => {
-          // touch事件event获取坐标，绘制线条
-          this.onDraw(event);
-        })
-          .width(this.descriptorWrapper.width)
-          .height(this.descriptorWrapper.height)
-          .backgroundColor(this.descriptorWrapper.backgroundColor)
-        this.buildTitleLabel();
-        this.buildButton();
-      }
+    RNViewBase({ ctx: this.ctx, tag: this.tag }) {
+      Canvas(this.context2D)
+        .onReady(() => {
+          this.canvasReady();
+        }).onTouch((event: TouchEvent) => {
+        // touch事件event获取坐标，绘制线条
+        this.onDraw(event);
+      })
+        .width(this.descriptorWrapper.width)
+        .height(this.descriptorWrapper.height)
+        .backgroundColor(this.descriptorWrapper.backgroundColor)
+      this.buildTitleLabel();
+      this.buildButton();
     }
   }
 }

harmony/rnoh_signature_capture/src/main/ets/SignatureCapturePackage.ts

@@ -31,7 +31,7 @@ export class SignatureCapturePackage extends RNPackage {
 
   createDescriptorWrapperFactoryByDescriptorType(ctx: DescriptorWrapperFactoryByDescriptorTypeCtx): DescriptorWrapperFactoryByDescriptorType {
     return {
-      [RNC.SignatureCaptureArkView.NAME]: (ctx) => new RNC.SignatureCaptureArkView.DescriptorWrapper(ctx.descriptor)
+      [RNC.RSSignatureArkView.NAME]: (ctx) => new RNC.RSSignatureArkView.DescriptorWrapper(ctx.descriptor)
     }
   }
 }

src/SignatureCapture.harmony.tsx

@@ -1,23 +1,14 @@
-import React, { useRef } from "react";
-import {
-    NativeSyntheticEvent,
-    ViewStyle,
-    StyleProp,
+import React from "react";
+import type { ProcessedColorValue, StyleProp, ViewProps } from "react-native";
+var ReactNative = require('react-native');
+var {
     UIManager,
-    findNodeHandle,
-    ProcessedColorValue,
-    processColor,
-  } from "react-native";
-  import SignatureCaptureNativeComponent from './SignatureCaptureNativeComponent';
-
-  export type SignatureComponentRef = {
-     saveImage: () => void
-     resetImage: () => void
-   };
-
-const SignatureCaptureHarmonyComponent = React.forwardRef<
-  SignatureComponentRef,
-  {
+    DeviceEventEmitter
+} = ReactNative;
+
+import RSSignatureView from './SignatureCaptureNativeComponent'; 
+
+type SignProps = {
     backgroundColor?: ProcessedColorValue;
     onSaveEvent?: (ev: {pathName: string, encoded: string}) => void
     onDragEvent?: (ev: {dragged: boolean}) => void
@@ -29,77 +20,95 @@ const SignatureCaptureHarmonyComponent = React.forwardRef<
     showBorder?:boolean
     viewMode?: 'portrait' | 'landscape'
     maxSize?: number
-    styles?: StyleProp<ViewStyle>
-  }
->(( props, ref) => {
-  const nativeRef = useRef<any>(null);
-
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      saveImage() {
-        if (nativeRef?.current) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(nativeRef.current),
-            "saveImage",
-            []
-          );
+    style?: StyleProp<ViewProps>
+}
+
+class SignatureCapture extends React.Component<SignProps> {
+
+    private subscriptions: Array<{remove: () => void}> = [];
+
+    constructor(props: SignProps) {
+        super(props);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    borderStyle = { borderWidth: 1, borderStyle: 'dashed', borderColor: '#ccc' }
+
+    onChange(event: any) {
+
+        if(event.nativeEvent.pathName){
+
+            if (!this.props.onSaveEvent) {
+                return;
+            }
+            this.props.onSaveEvent({
+                pathName: event.nativeEvent.pathName,
+                encoded: event.nativeEvent.encoded,
+            });
         }
-      },
-      resetImage() {
-        if (nativeRef?.current) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(nativeRef.current),
-            "resetImage",
-            []
-          );
+
+        if(event.nativeEvent.dragged){
+            if (!this.props.onDragEvent) {
+                return;
+            }
+            this.props.onDragEvent({
+                dragged: event.nativeEvent.dragged
+            });
         }
-      },
-    }),
-    []
-  );
-
-  const borderStyle: StyleProp<ViewStyle> = {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: '#ccc'
-  }
-
-  const onChange = (ev: NativeSyntheticEvent<{pathName: string, encoded: string} | {dragged: boolean}>) => {
-    const nativeEvent = ev.nativeEvent; 
-
-    if ('pathName' in nativeEvent) {
-      if (!props.onSaveEvent) { return; }
-      nativeEvent.pathName && props.onSaveEvent({
-        pathName: nativeEvent.pathName,
-        encoded: nativeEvent.encoded
-      })
     }
-    if ('dragged' in nativeEvent) {
-      if (!props.onDragEvent) { return; }
-      nativeEvent.dragged && props.onDragEvent({
-        dragged: nativeEvent.dragged
-      })
+
+    componentDidMount() {
+        if (this.props.onSaveEvent) {
+            let sub = DeviceEventEmitter.addListener(
+                'onSaveEvent',
+                this.props.onSaveEvent
+            );
+            this.subscriptions.push(sub);
+        }
+
+        if (this.props.onDragEvent) {
+            let sub = DeviceEventEmitter.addListener(
+                'onDragEvent',
+                this.props.onDragEvent
+            );
+            this.subscriptions.push(sub);
+        }
+    }
+
+    componentWillUnmount() {
+        this.subscriptions.forEach((sub: any) => sub.remove());
+        this.subscriptions = [];
+    }
+
+    render() {
+        let borderStyle = this.props.showBorder ? this.borderStyle : {};
+        let finalStyle = Array.isArray(this.props.style) ? [...this.props.style, borderStyle] : [this.props.style, borderStyle];
+
+        const processColorProps = {
+            ...this.props, backgroundColor: ReactNative.processColor(this.props.backgroundColor),
+            strokeColor: ReactNative.processColor(this.props.strokeColor), style: finalStyle
+        }
+        return (
+            <RSSignatureView {...processColorProps} onChange={this.onChange} />
+        );
+    }
+
+    saveImage() {
+        UIManager.dispatchViewManagerCommand(
+            ReactNative.findNodeHandle(this),
+            'saveImage',
+            [],
+        );
     }
-  }
-
-  const processedStrokeColor = processColor(props.strokeColor ?? 'black');
-  const processedBackgroundColor = processColor(props.backgroundColor);
-
-
-  const colorHandleProps = {
-    ...props, strokeColor: processedStrokeColor, backgroundColor: processedBackgroundColor
-  }
-
-
-  return (
-    <SignatureCaptureNativeComponent
-      ref={nativeRef}
-      style={[props.styles, props.showBorder ? borderStyle : {}]}
-      onChange={onChange}
-      {...colorHandleProps}
-    />
-  );
-})
-
-export default SignatureCaptureHarmonyComponent;
+
+    resetImage() {
+        UIManager.dispatchViewManagerCommand(
+            ReactNative.findNodeHandle(this),
+            'resetImage',
+            [],
+        );
+    }
+}
+
+
+export default SignatureCapture;

src/SignatureCaptureNativeComponent.ts

@@ -54,5 +54,5 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  * codegen restriction: the result of codegenNativeComponent must be a default export
  */
 export default codegenNativeComponent<SignatureCaptureArkViewNativeProps>(
-  'SignatureCaptureArkView'
+  'RSSignatureArkView'
 ) as HostComponent<SignatureCaptureArkViewNativeProps>

src/index.ts

@@ -2,7 +2,7 @@ import SignatureCapture from 'react-native-signature-capture';
 import SignatureCaputreHarmony from './SignatureCapture.harmony';
 import { Platform } from 'react-native';
 
-const isIosAndroid = (() => Platform.OS === 'ios' || Platform.OS === 'android')();
+const isIosAndroid = Platform.OS === 'ios' || Platform.OS === 'android';
 
 const exportComp = isIosAndroid ? SignatureCapture : SignatureCaputreHarmony;