fix: 修复 RN runtime 组件问题

packages/webpack-plugin/lib/runtime/components/react/mpx-camera.tsx

@@ -20,7 +20,7 @@ interface CameraProps {
   flash?: 'auto' | 'on' | 'off'
   'frame-size'?: 'small' | 'medium' | 'large'
   style?: Record<string, any>
-  bindstop?: () => void
+  bindstop?: (event: Record<string, any>) => void
   binderror?: (error: { message: string }) => void
   bindinitdone?: (result: { type: string, data: string }) => void
   bindscancode?: (result: { type: string, data: string }) => void
@@ -177,7 +177,7 @@ const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: Ca
   }, [bindinitdone, maxZoom])
 
   const onStopped = useCallback(() => {
-    bindstop && bindstop()
+    bindstop && bindstop(getCustomEvent('stop', {}, { layoutRef }))
   }, [bindstop])
 
   const camera: CameraRef = useMemo(() => ({

packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -13,8 +13,8 @@ export class Image {
   canvas: any;
   width: number;
   height: number;
-  private _loadListener: any;
-  private _errorListener: any;
+  private _removeLoadListener?: () => void;
+  private _removeErrorListener?: () => void;
   private _onload: ((...args: any[]) => void);
   private _onerror: ((...args: any[]) => void);
   [key: string]: any;
@@ -70,12 +70,8 @@ export class Image {
 
   set onload (callback: ((...args: any[]) => void)) {
     this._onload = callback
-    if (this._loadListener) {
-      this.canvas.removeMessageListener(this._loadListener)
-    }
-    if (callback) {
-      this._loadListener = this.addEventListener('load', callback)
-    }
+    this._removeLoadListener?.()
+    this._removeLoadListener = callback ? this.addEventListener('load', callback) : undefined
   }
 
   get onload (): ((...args: any[]) => void) {
@@ -84,12 +80,8 @@ export class Image {
 
   set onerror (callback: ((...args: any[]) => void)) {
     this._onerror = callback
-    if (this._errorListener) {
-      this.canvas.removeMessageListener(this._errorListener)
-    }
-    if (callback) {
-      this._errorListener = this.addEventListener('error', callback)
-    }
+    this._removeErrorListener?.()
+    this._removeErrorListener = callback ? this.addEventListener('error', callback) : undefined
   }
 
   get onerror () : ((...args: any[]) => void) {

packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -200,7 +200,10 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   const removeMessageListener = (listener: any) => {
-    canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1)
+    const index = canvasRef.current.listeners.indexOf(listener)
+    if (index > -1) {
+      canvasRef.current.listeners.splice(index, 1)
+    }
   }
 
   const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
@@ -288,22 +291,22 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         allowUniversalAccessFromFileURLs: true
       })
     )
+  } else {
+    canvasComponent = createElement(View, innerProps, createElement(WebView, {
+      ref: (element: WebViewInstance | null) => {
+        if (canvasRef.current) {
+          canvasRef.current.webview = element
+        }
+      },
+      style: [stylesheet.webview, { height, width }],
+      source: { html },
+      originWhitelist: originWhitelist,
+      onMessage: onMessage,
+      onLoad: onLoad,
+      scrollEnabled: false
+    }))
   }
 
-  canvasComponent = createElement(View, innerProps, createElement(WebView, {
-    ref: (element: WebViewInstance | null) => {
-      if (canvasRef.current) {
-        canvasRef.current.webview = element
-      }
-    },
-    style: [stylesheet.webview, { height, width }],
-    source: { html },
-    originWhitelist: originWhitelist,
-    onMessage: onMessage,
-    onLoad: onLoad,
-    scrollEnabled: false
-  }))
-
   if (hasPositionFixed) {
     canvasComponent = createElement(Portal, null, canvasComponent)
   }

packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -138,7 +138,7 @@ const CheckboxGroup = forwardRef<
       bindchange &&
         bindchange(
           getCustomEvent(
-            'tap',
+            'change',
             evt,
             {
               layoutRef,

packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx

@@ -23,7 +23,7 @@ interface FormProps {
       value: any
     }
   }) => void
-  bindreset?: () => void
+  bindreset?: (evt: Record<string, any>) => void
 }
 
 const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
@@ -98,7 +98,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
     const reset = () => {
       const { bindreset } = propsRef.current
-      bindreset && bindreset()
+      bindreset && bindreset(getCustomEvent('reset', {}, { layoutRef }, propsRef.current))
       formValuesMap.forEach(item => item.resetValue())
     }
     return {

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx

@@ -121,7 +121,7 @@ const valueChanged2Obj = (currentObj: FormatObj, value: number[], limit = 3) =>
   const rangeArr = currentObj.rangeArr
 
   if (limit === 3 && (currentValue[0] !== value[0] || currentValue[1] !== value[1])) {
-    const days = daysInMonth(value[0], value[1] + 1)
+    const days = daysInMonth(value[0] + START_YEAR, value[1] + 1)
     rangeArr[2] = days
     const maxIndex = days.length - 1
     if (value[2] > maxIndex) {

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx

@@ -250,7 +250,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     }
 
     const onCancel = () => {
-      bindcancel?.()
+      bindcancel?.(getCustomEvent('cancel', {}, { layoutRef }, props))
       hide()
     }
 

packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx

@@ -118,7 +118,7 @@ const radioGroup = forwardRef<
       bindchange &&
         bindchange(
           getCustomEvent(
-            'tap',
+            'change',
             evt,
             {
               layoutRef,

packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -57,7 +57,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
   const headerTopRef = useRef(0)
 
   useEffect(() => {
-    registerStickyHeader({ key: id, updatePosition })
+    registerStickyHeader({ id, updatePosition })
     return () => {
       unregisterStickyHeader(id)
     }

packages/webpack-plugin/lib/runtime/components/react/mpx-video.tsx

@@ -213,7 +213,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
   }
 
   function handleEnd () {
-    bindended!(getCustomEvent('end', {}, { layoutRef }, propsRef.current))
+    bindended!(getCustomEvent('ended', {}, { layoutRef }, propsRef.current))
   }
 
   function handleWaiting ({ isBuffering }: OnBufferData) {
@@ -259,7 +259,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
 
   function handleAndroidControlsVisibilityChange ({ isVisible }: OnControlsVisibilityChange) {
     bindcontrolstoggle!(
-      getCustomEvent('progress',
+      getCustomEvent('controlstoggle',
         {},
         {
           detail: {
@@ -292,7 +292,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
   }
 
   function handleError ({ error }: OnVideoErrorData) {
-    binderror && binderror(getCustomEvent('play', {}, { detail: { errMsg: error.localizedFailureReason }, layoutRef }, propsRef.current))
+    binderror && binderror(getCustomEvent('error', {}, { detail: { errMsg: error.localizedFailureReason }, layoutRef }, propsRef.current))
   }
 
   function play () {