@mpxjs/webpack-plugin 2.9.70 → 2.9.71

package/lib/platform/template/wx/component-config/movable-view.js

@@ -2,6 +2,8 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
+  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
+  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
@@ -27,7 +29,7 @@ module.exports = function ({ print }) {
         android: androidPropLog
       },
       {
-        test: /^(inertia|damping|animation)$/,
+        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
         ios: iosPropLog,
         android: androidPropLog
       }
@@ -36,6 +38,11 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
+      },
+      {
+        test: /^(bindscale)$/,
+        ios: iosEventLog,
+        android: androidEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/picker-view.js

@@ -6,9 +6,7 @@ module.exports = function ({ print }) {
   const ttPropLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false })
   const ttEventLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false, type: 'event' })
   const jdEventLog = print({ platform: 'jd', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   return {
@@ -28,9 +26,7 @@ module.exports = function ({ print }) {
     props: [
       {
         test: /^(indicator-class|mask-class)$/,
-        tt: ttPropLog,
-        ios: iosPropLog,
-        android: androidPropLog
+        tt: ttPropLog
       }
     ],
     event: [

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -53,7 +53,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(scroll-into-view|refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
+        test: /^(refresher-threshold|enable-passive|scroll-anchoring|using-sticky|fast-deceleration|enable-flex)$/,
         android: androidPropLog,
         ios: iosPropLog
       },

package/lib/platform/template/wx/index.js

@@ -384,10 +384,6 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ name, value }, { eventRules, el, usingComponents }) {
-          const parsed = parseMustacheWithContext(value)
-          if (parsed.hasBinding) {
-            value = '__invokeHandler(' + parsed.result + ', $event)'
-          }
           const match = this.test.exec(name)
           const prefix = match[1]
           const eventName = match[2]

package/lib/runtime/components/react/context.ts

@@ -33,6 +33,10 @@ export interface IntersectionObserver {
   }
 }
 
+export interface ScrollViewContextValue {
+   gestureRef: React.RefObject<any> | null
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -51,4 +55,8 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
 
 export const RouteContext = createContext<number | null>(null)
 
+export const SwiperContext = createContext({})
+
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
+
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })

package/lib/runtime/components/react/dist/context.js

@@ -8,4 +8,6 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
+export const ScrollViewContext = createContext({ gestureRef: null });

package/lib/runtime/components/react/dist/getInnerListeners.js

@@ -1,8 +1,13 @@
 import { useRef, useMemo } from 'react';
 import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { useNavigation } from '@react-navigation/native';
 import { omit, extendObject } from './utils';
 import eventConfigMap from './event.config';
-const getTouchEvent = (type, event, props, config) => {
+const globalEventState = {
+    needPress: true
+};
+const getTouchEvent = (type, event, props, config, navigation) => {
+    const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
@@ -25,24 +30,24 @@ const getTouchEvent = (type, event, props, config) => {
         target,
         detail: {
             x: pageX,
-            y: pageY
+            y: pageY - navigationY
         },
         touches: touches.map((item) => {
             return {
                 identifier: item.identifier,
                 pageX: item.pageX,
-                pageY: item.pageY,
-                clientX: item.locationX,
-                clientY: item.locationY
+                pageY: item.pageY - navigationY,
+                clientX: item.pageX,
+                clientY: item.pageY - navigationY
             };
         }),
         changedTouches: changedTouches.map((item) => {
             return {
                 identifier: item.identifier,
                 pageX: item.pageX,
-                pageY: item.pageY,
-                clientX: item.locationX,
-                clientY: item.locationY
+                pageY: item.pageY - navigationY,
+                clientX: item.pageX,
+                clientY: item.pageY - navigationY
             };
         }),
         persist: event.persist,
@@ -66,14 +71,14 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     });
 };
-function handleEmitEvent(events, type, oe, propsRef, config) {
+function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
     events.forEach((event) => {
         if (propsRef.current[event]) {
             const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
             if (match) {
                 oe.stopPropagation();
             }
-            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config));
+            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
         }
     });
 }
@@ -84,13 +89,13 @@ function checkIsNeedPress(e, type, ref) {
     const currentPageY = nativeEvent.changedTouches[0].pageY;
     if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
         Math.abs(currentPageY - tapDetailInfo.y) > 3) {
-        ref.current.needPress[type] = false;
+        globalEventState.needPress = false;
         ref.current.startTimer[type] &&
             clearTimeout(ref.current.startTimer[type]);
         ref.current.startTimer[type] = null;
     }
 }
-function handleTouchstart(e, type, ref, propsRef, config) {
+function handleTouchstart(e, type, ref, propsRef, config, navigation) {
     e.persist();
     const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
     const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
@@ -103,7 +108,7 @@ function handleTouchstart(e, type, ref, propsRef, config) {
         'capture-bindlongpress'
     ];
     ref.current.startTimer[type] = null;
-    ref.current.needPress[type] = true;
+    globalEventState.needPress = true;
     const nativeEvent = e.nativeEvent;
     ref.current.mpxPressInfo.detail = {
         x: nativeEvent.changedTouches[0].pageX,
@@ -111,29 +116,30 @@ function handleTouchstart(e, type, ref, propsRef, config) {
     };
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
     const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config);
+    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
     const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
     if (catchlongpress ||
         bindlongpress ||
         captureCatchlongpress ||
         captureBindlongpress) {
         ref.current.startTimer[type] = setTimeout(() => {
-            ref.current.needPress[type] = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config);
+            // 只要触发过longpress, 全局就不再触发tap
+            globalEventState.needPress = false;
+            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
         }, 350);
     }
 }
-function handleTouchmove(e, type, ref, propsRef, config) {
+function handleTouchmove(e, type, ref, propsRef, config, navigation) {
     const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
     const captureTouchEvent = [
         'capture-catchtouchmove',
         'capture-bindtouchmove'
     ];
     const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config);
+    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
     checkIsNeedPress(e, type, ref);
 }
-function handleTouchend(e, type, ref, propsRef, config) {
+function handleTouchend(e, type, ref, propsRef, config, navigation) {
     // move event may not be triggered
     checkIsNeedPress(e, type, ref);
     const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
@@ -148,15 +154,15 @@ function handleTouchend(e, type, ref, propsRef, config) {
     ref.current.startTimer[type] &&
         clearTimeout(ref.current.startTimer[type]);
     ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config);
-    if (ref.current.needPress[type]) {
+    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
+    if (globalEventState.needPress) {
         if (type === 'bubble' && config.disableTap) {
             return;
         }
-        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config);
+        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
     }
 }
-function handleTouchcancel(e, type, ref, propsRef, config) {
+function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
     const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
     const captureTouchEvent = [
         'capture-catchtouchcancel',
@@ -166,10 +172,10 @@ function handleTouchcancel(e, type, ref, propsRef, config) {
     ref.current.startTimer[type] &&
         clearTimeout(ref.current.startTimer[type]);
     ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config);
+    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
 }
 function createTouchEventHandler(eventName, type) {
-    return (e, ref, propsRef, config) => {
+    return (e, ref, propsRef, config, navigation) => {
         const handlerMap = {
             onTouchStart: handleTouchstart,
             onTouchMove: handleTouchmove,
@@ -178,7 +184,7 @@ function createTouchEventHandler(eventName, type) {
         };
         const handler = handlerMap[eventName];
         if (handler) {
-            handler(e, type, ref, propsRef, config);
+            handler(e, type, ref, propsRef, config, navigation);
         }
     };
 }
@@ -198,10 +204,6 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
             bubble: null,
             capture: null
         },
-        needPress: {
-            bubble: false,
-            capture: false
-        },
         mpxPressInfo: {
             detail: {
                 x: 0,
@@ -215,6 +217,7 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         layoutRef: { current: {} },
         disableTap: false
     };
+    const navigation = useNavigation();
     const removeProps = [
         'children',
         'enable-background',
@@ -250,7 +253,7 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         const events = {};
         touchEventList.forEach((item) => {
             if (finalEventKeys.includes(item.eventName)) {
-                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config);
+                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
             }
         });
         return events;

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -34,10 +34,11 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, forwardRef, useContext } from 'react';
+import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -128,38 +129,34 @@ const Loading = ({ alone = false }) => {
 };
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
+    const enableHover = hoverClass !== 'none';
+    const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled });
     let submitFn;
     let resetFn;
     if (formContext) {
         submitFn = formContext.submit;
         resetFn = formContext.reset;
     }
-    const refs = useRef({
-        hoverStartTimer: undefined,
-        hoverStayTimer: undefined
-    });
-    const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
-    const applyHoverEffect = isHover && hoverClass !== 'none';
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
-    const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color;
+    const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color;
     const plainBorderColor = disabled
         ? 'rgba(0, 0, 0, .2)'
-        : applyHoverEffect
+        : isHover
             ? `rgba(${plainColor},.6)`
             : `rgb(${plainColor})`;
     const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
     const plainTextColor = disabled
         ? 'rgba(0, 0, 0, .2)'
-        : applyHoverEffect
+        : isHover
             ? `rgba(${plainColor}, .6)`
             : `rgb(${plainColor})`;
     const normalTextColor = type === 'default'
-        ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-        : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`;
+        ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+        : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`;
     const viewStyle = {
         borderWidth: 1,
         borderStyle: 'solid',
@@ -169,7 +166,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const defaultViewStyle = extendObject({}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle);
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
-    const styleObj = extendObject({}, defaultStyle, style, applyHoverEffect ? hoverStyle : {});
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
@@ -224,32 +221,6 @@ const Button = forwardRef((buttonProps, ref) => {
             });
         }
     };
-    const setStayTimer = () => {
-        clearTimeout(refs.current.hoverStayTimer);
-        refs.current.hoverStayTimer = setTimeout(() => {
-            setIsHover(false);
-            clearTimeout(refs.current.hoverStayTimer);
-        }, hoverStayTime);
-    };
-    const setStartTimer = () => {
-        clearTimeout(refs.current.hoverStartTimer);
-        refs.current.hoverStartTimer = setTimeout(() => {
-            setIsHover(true);
-            clearTimeout(refs.current.hoverStartTimer);
-        }, hoverStartTime);
-    };
-    const onTouchStart = (evt) => {
-        bindtouchstart && bindtouchstart(evt);
-        if (disabled)
-            return;
-        setStartTimer();
-    };
-    const onTouchEnd = (evt) => {
-        bindtouchend && bindtouchend(evt);
-        if (disabled)
-            return;
-        setStayTimer();
-    };
     const handleFormTypeFn = () => {
         if (formType === 'submit') {
             submitFn && submitFn();
@@ -269,8 +240,6 @@ const Button = forwardRef((buttonProps, ref) => {
         ref: nodeRef,
         style: extendObject({}, innerStyle, layoutStyle)
     }, layoutProps, {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
     }), [
         'disabled',
@@ -288,12 +257,15 @@ const Button = forwardRef((buttonProps, ref) => {
         layoutRef,
         disableTap: disabled
     });
-    return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     }));
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, baseButton)
+        : baseButton;
 });
 Button.displayName = 'MpxButton';
 export default Button;

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove
@@ -19,12 +19,13 @@
  */
 import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
 import { StyleSheet } from 'react-native';
-import { getCustomEvent } from './getInnerListeners';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
+import { collectDataset, noop } from '@mpxjs/utils';
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -233,8 +234,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
         props.onLayout && props.onLayout(e);
     };
-    const extendEvent = useCallback((e) => {
-        'worklet';
+    const extendEvent = useCallback((e, obj) => {
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
@@ -242,45 +242,65 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 item.pageY = item.absoluteY;
             });
         });
-        e.touches = e.allTouches;
+        Object.assign(e, {
+            touches: e.allTouches,
+            detail: {
+                x: e.changedTouches[0].absoluteX,
+                y: e.changedTouches[0].absoluteY
+            },
+            currentTarget: {
+                id: props.id || '',
+                dataset: collectDataset(props),
+                offsetLeft: 0,
+                offsetTop: 0
+            }
+        }, obj);
     }, []);
+    const triggerStartOnJS = ({ e }) => {
+        extendEvent(e);
+        bindtouchstart && bindtouchstart(e);
+        catchtouchstart && catchtouchstart(e);
+    };
+    const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
+        extendEvent(e);
+        if (hasTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                bindhtouchmove && bindhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                bindvtouchmove && bindvtouchmove(e);
+            }
+            bindtouchmove && bindtouchmove(e);
+        }
+        if (hasCatchTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                catchhtouchmove && catchhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                catchvtouchmove && catchvtouchmove(e);
+            }
+            catchtouchmove && catchtouchmove(e);
+        }
+    };
+    const triggerEndOnJS = ({ e }) => {
+        extendEvent(e);
+        bindtouchend && bindtouchend(e);
+        catchtouchend && catchtouchend(e);
+    };
     const gesture = useMemo(() => {
-        const handleTriggerStart = (e) => {
-            'worklet';
-            extendEvent(e);
-            bindtouchstart && runOnJS(bindtouchstart)(e);
-            catchtouchstart && runOnJS(catchtouchstart)(e);
-        };
         const handleTriggerMove = (e) => {
             'worklet';
-            extendEvent(e);
             const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
             const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
-            if (hasTouchmove) {
-                if (touchEvent.value === 'htouchmove') {
-                    bindhtouchmove && runOnJS(bindhtouchmove)(e);
-                }
-                else if (touchEvent.value === 'vtouchmove') {
-                    bindvtouchmove && runOnJS(bindvtouchmove)(e);
-                }
-                bindtouchmove && runOnJS(bindtouchmove)(e);
-            }
-            if (hasCatchTouchmove) {
-                if (touchEvent.value === 'htouchmove') {
-                    catchhtouchmove && runOnJS(catchhtouchmove)(e);
-                }
-                else if (touchEvent.value === 'vtouchmove') {
-                    catchvtouchmove && runOnJS(catchvtouchmove)(e);
-                }
-                catchtouchmove && runOnJS(catchtouchmove)(e);
+            if (hasTouchmove || hasCatchTouchmove) {
+                runOnJS(triggerMoveOnJS)({
+                    e,
+                    touchEvent: touchEvent.value,
+                    hasTouchmove,
+                    hasCatchTouchmove
+                });
             }
         };
-        const handleTriggerEnd = (e) => {
-            'worklet';
-            extendEvent(e);
-            bindtouchend && runOnJS(bindtouchend)(e);
-            catchtouchend && runOnJS(catchtouchend)(e);
-        };
         const gesturePan = Gesture.Pan()
             .onTouchesDown((e) => {
             'worklet';
@@ -290,12 +310,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 x: changedTouches.x,
                 y: changedTouches.y
             };
-            handleTriggerStart(e);
+            if (bindtouchstart || catchtouchstart) {
+                runOnJS(triggerStartOnJS)({ e });
+            }
         })
             .onTouchesMove((e) => {
             'worklet';
-            isMoving.value = true;
             const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            isMoving.value = true;
             if (isFirstTouch.value) {
                 touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove';
                 isFirstTouch.value = false;
@@ -330,7 +352,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             'worklet';
             isFirstTouch.value = true;
             isMoving.value = false;
-            handleTriggerEnd(e);
+            if (bindtouchend || catchtouchend) {
+                runOnJS(triggerEndOnJS)({ e });
+            }
             if (disabled)
                 return;
             if (!inertia) {
@@ -355,9 +379,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         })
             .onFinalize((e) => {
             'worklet';
+            isMoving.value = false;
             if (!inertia || disabled || !animation)
                 return;
-            isMoving.value = false;
             if (direction === 'horizontal' || direction === 'all') {
                 xInertialMotion.value = true;
                 offsetX.value = withDecay({
@@ -396,31 +420,42 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             ]
         };
     });
-    const injectCatchEvent = (props) => {
-        const eventHandlers = {};
-        const catchEventList = [
-            { name: 'onTouchStart', value: ['catchtouchstart'] },
-            { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchhtouchmove'] },
-            { name: 'onTouchEnd', value: ['catchtouchend'] }
+    const rewriteCatchEvent = () => {
+        const handlers = {};
+        const events = [
+            { type: 'touchstart' },
+            { type: 'touchmove', alias: ['vtouchmove', 'htouchmove'] },
+            { type: 'touchend' }
         ];
-        catchEventList.forEach(event => {
-            event.value.forEach(name => {
-                if (props[name] && !eventHandlers[event.name]) {
-                    eventHandlers[event.name] = (e) => {
-                        e.stopPropagation();
-                    };
-                }
-            });
+        events.forEach(({ type, alias = [] }) => {
+            const hasCatchEvent = props[`catch${type}`] ||
+                alias.some(name => props[`catch${name}`]);
+            if (hasCatchEvent)
+                handlers[`catch${type}`] = noop;
         });
-        return eventHandlers;
+        return handlers;
     };
-    const catchEventHandlers = injectCatchEvent(props);
     const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
-    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, extendObject({
+    // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
+    // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
+    const filterProps = omit(props, [
+        'bindtouchstart',
+        'bindtouchmove',
+        'bindvtouchmove',
+        'bindhtouchmove',
+        'bindtouchend',
+        'catchtouchstart',
+        'catchtouchmove',
+        'catchvtouchmove',
+        'catchhtouchmove',
+        'catchtouchend'
+    ]);
+    const innerProps = useInnerProps(filterProps, extendObject({
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]
-    }, catchEventHandlers), wrapChildren(props, {
+    }, rewriteCatchEvent()));
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,

package/lib/runtime/components/react/dist/mpx-navigator.jsx

@@ -3,7 +3,7 @@ import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
 const _Navigator = forwardRef((props, ref) => {
-    const { children, 'open-type': openType, url, delta } = props;
+    const { children, 'open-type': openType, url = '', delta } = props;
     const handleClick = useCallback(() => {
         switch (openType) {
             case 'navigateBack':