@mpxjs/webpack-plugin 2.10.5 → 2.10.6-beta.2

package/lib/runtime/components/react/dist/mpx-canvas/index.jsx

@@ -23,6 +23,7 @@ import './CanvasGradient';
 import { createImage as canvasCreateImage } from './Image';
 import { createImageData as canvasCreateImageData } from './ImageData';
 import { useConstructorsRegistry } from './constructorsRegistry';
+import Portal from '../mpx-portal';
 const stylesheet = StyleSheet.create({
     container: { overflow: 'hidden', flex: 0 },
     webview: {
@@ -41,7 +42,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
     const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isLoaded, setIsLoaded] = useState(false);
     const nodeRef = useRef(null);
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
+    const { normalStyle, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -110,10 +111,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
     const postMessage = useCallback(async (message) => {
         if (!canvasRef.current?.bus)
             return;
-        const { type, payload } = await canvasRef.current.bus.post({
-            id: ID(),
-            ...message
-        });
+        const { type, payload } = await canvasRef.current.bus.post(extendObject({ id: ID() }, message));
         switch (type) {
             case 'error': {
                 const { binderror } = props;
@@ -142,7 +140,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
         canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1);
     };
     const onMessage = useCallback((e) => {
-        let data = JSON.parse(e.nativeEvent.data);
+        const data = JSON.parse(e.nativeEvent.data);
         switch (data.type) {
             case 'error': {
                 const { binderror } = props;
@@ -156,27 +154,27 @@ const _Canvas = forwardRef((props = {}, ref) => {
                 break;
             }
             default: {
+                const newData = {};
+                // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+                const constructor = constructors[data.meta.constructor];
                 if (data.payload) {
-                    // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
-                    const constructor = constructors[data.meta.constructor];
                     if (constructor) {
                         const { args, payload } = data;
                         // RN 端同步生成一个 CanvasGradient 的实例
                         const object = constructor.constructLocally(canvasRef.current, ...args);
-                        Object.assign(object, payload, {
+                        extendObject(object, payload, {
                             [WEBVIEW_TARGET]: data.meta.target
                         });
-                        data = {
-                            ...data,
+                        extendObject(newData, data, {
                             payload: object
-                        };
+                        });
                     }
                     for (const listener of canvasRef.current.listeners) {
-                        listener(data.payload);
+                        listener(constructor ? newData.payload : data.payload);
                     }
                 }
                 if (canvasRef.current.bus) {
-                    canvasRef.current.bus.handle(data);
+                    canvasRef.current.bus.handle(constructor && data.payload ? newData : data);
                 }
             }
         }
@@ -192,9 +190,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
         node: canvasRef.current,
         context: context2D
     });
-    if (__mpx_mode__ !== 'ios') {
+    let canvasComponent;
+    if (__mpx_mode__ === 'android') {
         const isAndroid9 = Platform.Version >= 28;
-        return createElement(View, innerProps, createElement(WebView, {
+        canvasComponent = createElement(View, innerProps, createElement(WebView, {
             ref: (element) => {
                 if (canvasRef.current) {
                     canvasRef.current.webview = element;
@@ -217,7 +216,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
             allowUniversalAccessFromFileURLs: true
         }));
     }
-    return createElement(View, innerProps, createElement(WebView, {
+    canvasComponent = createElement(View, innerProps, createElement(WebView, {
         ref: (element) => {
             if (canvasRef.current) {
                 canvasRef.current.webview = element;
@@ -230,6 +229,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
         onLoad: onLoad,
         scrollEnabled: false
     }));
+    if (hasPositionFixed) {
+        canvasComponent = createElement(Portal, null, canvasComponent);
+    }
+    return canvasComponent;
 });
 _Canvas.displayName = 'mpxCanvas';
 export default _Canvas;

package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx

@@ -8,6 +8,7 @@ import { FormContext, CheckboxGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import Portal from './mpx-portal';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
@@ -23,7 +24,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
         flexWrap: 'wrap'
     };
     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 });
@@ -81,10 +82,14 @@ const CheckboxGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    return createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 CheckboxGroup.displayName = 'MpxCheckboxGroup';
 export default CheckboxGroup;

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

@@ -12,6 +12,7 @@ import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
@@ -63,7 +64,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    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: extendObject({}, defaultStyle, normalStyle),
@@ -114,7 +115,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
             }
         }
     }, [checked]);
-    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
         type: 'success_no_circle',
         size: 18,
         color: disabled ? '#ADADAD' : color,
@@ -125,6 +126,10 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         textStyle,
         textProps
     }));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Checkbox.displayName = 'MpxCheckbox';
 export default Checkbox;

package/lib/runtime/components/react/dist/mpx-icon/index.jsx

@@ -17,6 +17,7 @@ import Cancel from './icons/cancel.png';
 import Download from './icons/download.png';
 import Search from './icons/search.png';
 import Clear from './icons/clear.png';
+import Portal from '../mpx-portal';
 const IconTypeMap = new Map([
     ['success', Success],
     ['success_no_circle', SuccessNoCircle],
@@ -33,7 +34,7 @@ const Icon = forwardRef((props, ref) => {
     const source = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, 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 });
@@ -44,7 +45,11 @@ const Icon = forwardRef((props, ref) => {
     }), [], {
         layoutRef
     });
-    return createElement(Image, innerProps);
+    const finalComponent = createElement(Image, innerProps);
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Icon.displayName = 'MpxIcon';
 export default Icon;

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

@@ -17,6 +17,7 @@ import { SvgCssUri } from 'react-native-svg/css';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
 const cropMode = [
@@ -79,7 +80,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,
@@ -255,6 +256,8 @@ const Image = forwardRef((props, ref) => {
                     state.current = {};
                     setLoaded(true);
                 }
+            }, () => {
+                setLoaded(true);
             });
         }
     }, [src, isSvg, isLayoutMode]);
@@ -286,7 +289,11 @@ const Image = forwardRef((props, ref) => {
         }, isCropMode ? modeStyle : {})
     }, isLayoutMode ? {} : innerProps), enableFastImage);
     const LayoutImage = createElement(View, innerProps, loaded && BaseImage);
-    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Image.displayName = 'mpx-image';
 export default Image;

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

@@ -44,6 +44,7 @@ import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } fr
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
+import Portal from './mpx-portal';
 const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
@@ -83,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
-    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -289,7 +290,11 @@ const Input = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    return createElement(TextInput, innerProps);
+    const finalComponent = createElement(TextInput, innerProps);
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Input.displayName = 'MpxInput';
 export default Input;

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

@@ -36,7 +36,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                     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;

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 });
@@ -40,12 +41,16 @@ const Label = forwardRef((labelProps, ref) => {
     }), [], {
         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
@@ -20,13 +21,17 @@ const _MovableArea = forwardRef((props, ref) => {
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
-        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
         ref: movableViewRef
     }), [], { layoutRef });
-    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+    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

@@ -24,7 +24,7 @@ import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } 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, withDecay, runOnJS, runOnUI, withSpring } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
 const styles = StyleSheet.create({
     container: {
@@ -41,7 +41,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, '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, 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 +61,7 @@ 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 MovableAreaLayout = useContext(MovableAreaContext);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -118,11 +119,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                         })
                         : newY;
                 }
-                runOnJS(handleTriggerChange)({
-                    x: newX,
-                    y: newY,
-                    type: 'setData'
-                });
+                if (bindchange) {
+                    runOnJS(handleTriggerChange)({
+                        x: newX,
+                        y: newY,
+                        type: 'setData'
+                    });
+                }
             }
         })();
     }, [x, y]);
@@ -132,16 +135,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];
@@ -259,11 +252,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,6 +280,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
+        const { bindtouchend, catchtouchend } = propsRef.current;
         extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
@@ -315,6 +311,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             if (bindtouchstart || catchtouchstart) {
                 runOnJS(triggerStartOnJS)({ e });
             }
+        })
+            .onStart(() => {
+            'worklet';
+            initialViewPosition.value = {
+                x: offsetX.value,
+                y: offsetY.value
+            };
         })
             .onTouchesMove((e) => {
             'worklet';
@@ -325,12 +328,13 @@ 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;
@@ -340,7 +344,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 }
             }
             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;
@@ -349,6 +353,12 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     offsetY.value = newY;
                 }
             }
+            if (bindchange) {
+                runOnJS(handleTriggerChange)({
+                    x: offsetX.value,
+                    y: offsetY.value
+                });
+            }
         })
             .onTouchesUp((e) => {
             'worklet';
@@ -357,55 +367,83 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             if (bindtouchend || catchtouchend) {
                 runOnJS(triggerEndOnJS)({ e });
             }
-            if (disabled)
-                return;
-            if (!inertia) {
-                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 (y !== offsetY.value) {
-                    offsetY.value = animation
-                        ? withSpring(y, {
-                            duration: 1500,
-                            dampingRatio: 0.8
-                        })
-                        : y;
-                }
-            }
         })
-            .onFinalize((e) => {
+            .onEnd((e) => {
             'worklet';
             isMoving.value = false;
-            if (!inertia || disabled || !animation)
+            if (disabled)
                 return;
-            if (direction === 'horizontal' || direction === 'all') {
-                xInertialMotion.value = true;
-                offsetX.value = withDecay({
-                    velocity: e.velocityX / 10,
-                    rubberBandEffect: outOfBounds,
-                    clamp: draggableXRange.value
-                }, () => {
-                    xInertialMotion.value = false;
-                });
+            // 处理没有惯性且超出边界的回弹
+            if (!inertia && outOfBounds) {
+                const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value });
+                if (x !== offsetX.value || y !== offsetY.value) {
+                    if (x !== offsetX.value) {
+                        offsetX.value = animation
+                            ? withSpring(x, {
+                                duration: 1500,
+                                dampingRatio: 0.8
+                            })
+                            : x;
+                    }
+                    if (y !== offsetY.value) {
+                        offsetY.value = animation
+                            ? withSpring(y, {
+                                duration: 1500,
+                                dampingRatio: 0.8
+                            })
+                            : y;
+                    }
+                    if (bindchange) {
+                        runOnJS(handleTriggerChange)({
+                            x,
+                            y
+                        });
+                    }
+                }
             }
-            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 (inertia) {
+                // 惯性处理
+                if (direction === 'horizontal' || direction === 'all') {
+                    xInertialMotion.value = true;
+                    offsetX.value = withDecay({
+                        velocity: e.velocityX / 10,
+                        rubberBandEffect: outOfBounds,
+                        clamp: draggableXRange.value
+                    }, () => {
+                        xInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(handleTriggerChange)({
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
+                }
+                if (direction === 'vertical' || direction === 'all') {
+                    yInertialMotion.value = true;
+                    offsetY.value = withDecay({
+                        velocity: e.velocityY / 10,
+                        rubberBandEffect: outOfBounds,
+                        clamp: draggableYRange.value
+                    }, () => {
+                        yInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(handleTriggerChange)({
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
+                }
             }
         })
             .withRef(movableGestureRef);
+        if (direction === 'horizontal') {
+            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+        }
+        else if (direction === 'vertical') {
+            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
         }