@mpxjs/webpack-plugin 2.10.3-beta.17 → 2.10.3-beta.18

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

@@ -1,22 +1,31 @@
-import React, { useContext, useEffect } from 'react';
-import { Keyboard, View, Platform } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import React, { useContext, useEffect, useRef } from 'react';
+import { Keyboard, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
+import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
-    const isIOS = Platform.OS === 'ios';
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + cancelAnimation 来优化
+    const isShow = useRef(false);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -30,16 +39,19 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         if (isIOS) {
             subscriptions = [
                 Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     setTimeout(() => {
                         ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                            const aboveOffset = pageY + height - endCoordinates.screenY;
+                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            cancelAnimation(offset);
                             offset.value = withTiming(value, { duration, easing }, (finished) => {
                                 if (finished) {
                                     // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -55,8 +67,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         else {
             subscriptions = [
                 Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     ref?.current?.measure((x, y, width, height, pageX, pageY) => {
@@ -65,6 +79,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                         const belowValue = Math.min(belowOffset, cursorSpacing);
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        cancelAnimation(offset);
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information

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

@@ -8,6 +8,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { LabelContext } from './context';
+import Portal from './mpx-portal';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
     const propsRef = useRef({});
@@ -17,7 +18,7 @@ const Label = forwardRef((labelProps, ref) => {
         flexDirection: 'row'
     };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -33,20 +34,23 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: onTap
     }), [], {
         layoutRef
     });
-    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Label.displayName = 'MpxLabel';
 export default Label;

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

@@ -7,9 +7,10 @@ import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef, {
         style: normalStyle
@@ -19,14 +20,18 @@ const _MovableArea = forwardRef((props, ref) => {
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, extendObject({
-        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
         ref: movableViewRef
-    }, layoutProps), [], { layoutRef });
-    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+    }), [], { layoutRef });
+    let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    if (hasPositionFixed) {
+        movableComponent = createElement(Portal, null, movableComponent);
+    }
+    return movableComponent;
 });
 _MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;

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

@@ -4,8 +4,8 @@
  * ✔ out-of-bounds
  * ✔ x
  * ✔ y
- * ✘ damping
- * ✘ friction
+ * ✔ damping
+ * ✔ friction
  * ✔ disabled
  * ✘ scale
  * ✘ scale-min
@@ -22,10 +22,98 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
+// 超出边界处理函数，参考微信小程序的超出边界衰减效果
+const applyBoundaryDecline = (newValue, range) => {
+    'worklet';
+    const decline = (distance) => {
+        'worklet';
+        return Math.sqrt(Math.abs(distance));
+    };
+    if (newValue < range[0]) {
+        const overDistance = range[0] - newValue;
+        return range[0] - decline(overDistance);
+    }
+    else if (newValue > range[1]) {
+        const overDistance = newValue - range[1];
+        return range[1] + decline(overDistance);
+    }
+    return newValue;
+};
+// 参考微信小程序的弹簧阻尼系统实现
+const withWechatSpring = (toValue, dampingParam = 20, callback) => {
+    'worklet';
+    // 弹簧参数计算
+    const m = 1; // 质量
+    const k = 9 * Math.pow(dampingParam, 2) / 40; // 弹簧系数
+    const c = dampingParam; // 阻尼系数
+    // 判别式：r = c² - 4mk
+    const discriminant = c * c - 4 * m * k;
+    // 计算动画持续时间和缓动函数
+    let duration;
+    let easingFunction;
+    if (Math.abs(discriminant) < 0.01) {
+        // 临界阻尼 (discriminant ≈ 0)
+        // 使用cubic-out模拟临界阻尼的平滑过渡
+        duration = Math.max(350, Math.min(800, 2000 / dampingParam));
+        easingFunction = Easing.out(Easing.cubic);
+    }
+    else if (discriminant > 0) {
+        // 过阻尼 (discriminant > 0)
+        // 使用指数缓动模拟过阻尼的缓慢收敛
+        duration = Math.max(450, Math.min(1000, 2500 / dampingParam));
+        easingFunction = Easing.out(Easing.exp);
+    }
+    else {
+        // 欠阻尼 (discriminant < 0) - 会产生振荡
+        // 计算振荡频率和衰减率
+        const dampingRatio = c / (2 * Math.sqrt(m * k)); // 阻尼比
+        // 根据阻尼比调整动画参数
+        if (dampingRatio < 0.7) {
+            // 明显振荡
+            duration = Math.max(600, Math.min(1200, 3000 / dampingParam));
+            // 创建带振荡的贝塞尔曲线
+            easingFunction = Easing.bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        else {
+            // 轻微振荡
+            duration = Math.max(400, Math.min(800, 2000 / dampingParam));
+            easingFunction = Easing.bezier(0.25, 0.46, 0.45, 0.94);
+        }
+    }
+    return withTiming(toValue, {
+        duration,
+        easing: easingFunction
+    }, callback);
+};
+// 参考微信小程序friction的惯性动画
+const withWechatDecay = (velocity, currentPosition, clampRange, frictionValue = 2, callback) => {
+    'worklet';
+    // 微信小程序friction算法: delta = -1.5 * v² / a, 其中 a = -f * v / |v|
+    // 如果friction小于等于0，设置为默认值2
+    const validFriction = frictionValue <= 0 ? 2 : frictionValue;
+    const f = 1000 * validFriction;
+    const acceleration = velocity !== 0 ? -f * velocity / Math.abs(velocity) : 0;
+    const delta = acceleration !== 0 ? (-1.5 * velocity * velocity) / acceleration : 0;
+    let finalPosition = currentPosition + delta;
+    // 边界限制
+    if (finalPosition < clampRange[0]) {
+        finalPosition = clampRange[0];
+    }
+    else if (finalPosition > clampRange[1]) {
+        finalPosition = clampRange[1];
+    }
+    // 计算动画时长
+    const distance = Math.abs(finalPosition - currentPosition);
+    const duration = Math.min(1500, Math.max(200, distance * 8));
+    return withTiming(finalPosition, {
+        duration,
+        easing: Easing.out(Easing.cubic)
+    }, callback);
+};
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -41,7 +129,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = props;
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -61,6 +149,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const yInertialMotion = useSharedValue(false);
     const isFirstTouch = useSharedValue(true);
     const touchEvent = useSharedValue('');
+    const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 });
+    const lastChangeTime = useSharedValue(0);
     const MovableAreaLayout = useContext(MovableAreaContext);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -104,25 +194,21 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
                 if (direction === 'horizontal' || direction === 'all') {
                     offsetX.value = animation
-                        ? withSpring(newX, {
-                            duration: 1500,
-                            dampingRatio: 0.8
-                        })
+                        ? withWechatSpring(newX, damping)
                         : newX;
                 }
                 if (direction === 'vertical' || direction === 'all') {
                     offsetY.value = animation
-                        ? withSpring(newY, {
-                            duration: 1500,
-                            dampingRatio: 0.8
-                        })
+                        ? withWechatSpring(newY, damping)
                         : newY;
                 }
-                runOnJS(handleTriggerChange)({
-                    x: newX,
-                    y: newY,
-                    type: 'setData'
-                });
+                if (bindchange) {
+                    runOnJS(runOnJSCallback)('handleTriggerChange', {
+                        x: newX,
+                        y: newY,
+                        type: 'setData'
+                    });
+                }
             }
         })();
     }, [x, y]);
@@ -132,16 +218,6 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             resetBoundaryAndCheck({ width, height });
         }
     }, [MovableAreaLayout.height, MovableAreaLayout.width]);
-    useAnimatedReaction(() => ({
-        offsetX: offsetX.value,
-        offsetY: offsetY.value
-    }), (currentValue) => {
-        const { offsetX, offsetY } = currentValue;
-        runOnJS(handleTriggerChange)({
-            x: offsetX,
-            y: offsetY
-        });
-    });
     const getTouchSource = useCallback((offsetX, offsetY) => {
         const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
             offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
@@ -230,14 +306,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             setHeight(height || 0);
         }
         nodeRef.current?.measure((x, y, width, height) => {
-            const { y: navigationY = 0 } = navigation?.layout || {};
+            const { top: navigationY = 0 } = navigation?.layout || {};
             layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
             resetBoundaryAndCheck({ width, height });
         });
         props.onLayout && props.onLayout(e);
     };
     const extendEvent = useCallback((e, type) => {
-        const { y: navigationY = 0 } = navigation?.layout || {};
+        const { top: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
@@ -259,11 +335,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
     }, []);
     const triggerStartOnJS = ({ e }) => {
+        const { bindtouchstart, catchtouchstart } = propsRef.current;
         extendEvent(e, 'start');
         bindtouchstart && bindtouchstart(e);
         catchtouchstart && catchtouchstart(e);
     };
     const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
+        const { bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove } = propsRef.current;
         extendEvent(e, 'move');
         if (hasTouchmove) {
             if (touchEvent === 'htouchmove') {
@@ -285,17 +363,34 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
+        const { bindtouchend, catchtouchend } = propsRef.current;
         extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };
+    const runOnJSCallbackRef = useRef({
+        handleTriggerChange,
+        triggerStartOnJS,
+        triggerMoveOnJS,
+        triggerEndOnJS
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
+    // 节流版本的change事件触发
+    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastChangeTime.value >= changeThrottleTime) {
+            lastChangeTime.value = now;
+            runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type });
+        }
+    }, [changeThrottleTime]);
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';
             const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
             const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
             if (hasTouchmove || hasCatchTouchmove) {
-                runOnJS(triggerMoveOnJS)({
+                runOnJS(runOnJSCallback)('triggerMoveOnJS', {
                     e,
                     touchEvent: touchEvent.value,
                     hasTouchmove,
@@ -313,8 +408,15 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 y: changedTouches.y
             };
             if (bindtouchstart || catchtouchstart) {
-                runOnJS(triggerStartOnJS)({ e });
+                runOnJS(runOnJSCallback)('triggerStartOnJS', { e });
             }
+        })
+            .onStart(() => {
+            'worklet';
+            initialViewPosition.value = {
+                x: offsetX.value,
+                y: offsetY.value
+            };
         })
             .onTouchesMove((e) => {
             'worklet';
@@ -325,87 +427,111 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 isFirstTouch.value = false;
             }
             handleTriggerMove(e);
+        })
+            .onUpdate((e) => {
+            'worklet';
             if (disabled)
                 return;
-            const changeX = changedTouches.x - startPosition.value.x;
-            const changeY = changedTouches.y - startPosition.value.y;
             if (direction === 'horizontal' || direction === 'all') {
-                const newX = offsetX.value + changeX;
+                const newX = initialViewPosition.value.x + e.translationX;
                 if (!outOfBounds) {
                     const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value });
                     offsetX.value = x;
                 }
                 else {
-                    offsetX.value = newX;
+                    offsetX.value = applyBoundaryDecline(newX, draggableXRange.value);
                 }
             }
             if (direction === 'vertical' || direction === 'all') {
-                const newY = offsetY.value + changeY;
+                const newY = initialViewPosition.value.y + e.translationY;
                 if (!outOfBounds) {
                     const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY });
                     offsetY.value = y;
                 }
                 else {
-                    offsetY.value = newY;
+                    offsetY.value = applyBoundaryDecline(newY, draggableYRange.value);
                 }
             }
+            if (bindchange) {
+                // 使用节流版本减少 runOnJS 调用
+                handleTriggerChangeThrottled({
+                    x: offsetX.value,
+                    y: offsetY.value
+                });
+            }
         })
             .onTouchesUp((e) => {
             'worklet';
             isFirstTouch.value = true;
             isMoving.value = false;
             if (bindtouchend || catchtouchend) {
-                runOnJS(triggerEndOnJS)({ e });
+                runOnJS(runOnJSCallback)('triggerEndOnJS', { e });
             }
+        })
+            .onEnd((e) => {
+            'worklet';
+            isMoving.value = false;
             if (disabled)
                 return;
-            if (!inertia) {
+            // 处理没有惯性且超出边界的回弹
+            if (!inertia && outOfBounds) {
                 const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value });
-                if (x !== offsetX.value) {
-                    offsetX.value = animation
-                        ? withSpring(x, {
-                            duration: 1500,
-                            dampingRatio: 0.8
-                        })
-                        : x;
+                if (x !== offsetX.value || y !== offsetY.value) {
+                    if (x !== offsetX.value) {
+                        offsetX.value = animation
+                            ? withWechatSpring(x, damping)
+                            : x;
+                    }
+                    if (y !== offsetY.value) {
+                        offsetY.value = animation
+                            ? withWechatSpring(y, damping)
+                            : y;
+                    }
+                    if (bindchange) {
+                        runOnJS(runOnJSCallback)('handleTriggerChange', {
+                            x,
+                            y
+                        });
+                    }
                 }
-                if (y !== offsetY.value) {
-                    offsetY.value = animation
-                        ? withSpring(y, {
-                            duration: 1500,
-                            dampingRatio: 0.8
-                        })
-                        : y;
+            }
+            else if (inertia) {
+                // 惯性处理 - 使用微信小程序friction算法
+                if (direction === 'horizontal' || direction === 'all') {
+                    xInertialMotion.value = true;
+                    offsetX.value = withWechatDecay(e.velocityX / 10, offsetX.value, draggableXRange.value, friction, () => {
+                        xInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(runOnJSCallback)('handleTriggerChange', {
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
+                }
+                if (direction === 'vertical' || direction === 'all') {
+                    yInertialMotion.value = true;
+                    offsetY.value = withWechatDecay(e.velocityY / 10, offsetY.value, draggableYRange.value, friction, () => {
+                        yInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(runOnJSCallback)('handleTriggerChange', {
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
                 }
             }
         })
-            .onFinalize((e) => {
-            'worklet';
-            isMoving.value = false;
-            if (!inertia || disabled || !animation)
-                return;
-            if (direction === 'horizontal' || direction === 'all') {
-                xInertialMotion.value = true;
-                offsetX.value = withDecay({
-                    velocity: e.velocityX / 10,
-                    rubberBandEffect: outOfBounds,
-                    clamp: draggableXRange.value
-                }, () => {
-                    xInertialMotion.value = false;
-                });
+            .withRef(movableGestureRef);
+        if (!disableEventPassthrough) {
+            if (direction === 'horizontal') {
+                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
             }
-            if (direction === 'vertical' || direction === 'all') {
-                yInertialMotion.value = true;
-                offsetY.value = withDecay({
-                    velocity: e.velocityY / 10,
-                    rubberBandEffect: outOfBounds,
-                    clamp: draggableYRange.value
-                }, () => {
-                    yInertialMotion.value = false;
-                });
+            else if (direction === 'vertical') {
+                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
             }
-        })
-            .withRef(movableGestureRef);
+        }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
         }
@@ -452,7 +578,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'catchhtouchmove',
         'catchtouchend'
     ]);
-    const innerProps = useInnerProps(filterProps, extendObject({
+    const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
         style: [innerStyle, animatedStyles, layoutStyle]

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

@@ -1,5 +1,13 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✔ open-type
+ * ✔ url
+ * ✔ delta
+ */
 import { useCallback, forwardRef, createElement } from 'react';
-import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
 const _Navigator = forwardRef((props, ref) => {
@@ -23,10 +31,10 @@ const _Navigator = forwardRef((props, ref) => {
                 break;
         }
     }, [openType, url, delta]);
-    const innerProps = useInnerProps(props, {
+    const innerProps = {
         ref,
         bindtap: handleClick
-    });
+    };
     return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';