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

package/lib/runtime/components/react/dist/AsyncSuspense.jsx

@@ -0,0 +1,68 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer';
+const asyncChunkMap = new Map();
+const AsyncSuspense = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
+    const [status, setStatus] = useState('pending');
+    const loaded = asyncChunkMap.has(request);
+    const [, setKey] = useState(0);
+    const chunkPromise = useRef(null);
+    const reloadPage = useCallback(() => {
+        setKey((preV) => preV + 1);
+        console.log('[mpxAsyncSuspense]: reload page');
+        setStatus('pending');
+    }, []);
+    useEffect(() => {
+        if (!loaded && status === 'pending') {
+            // todo 清楚副作用？
+            console.log('the current :', chunkPromise.current);
+            chunkPromise.current
+                .then((m) => {
+                console.log('[mpxAsyncSuspense]: load sucess');
+                asyncChunkMap.set(request, m.__esModule ? m.default : m);
+                setStatus('loaded');
+            })
+                .catch((e) => {
+                if (type === 'component') {
+                    console.log(11111, e);
+                    global.onLazyLoadError({
+                        type: 'subpackage',
+                        subpackage: [chunkName],
+                        errMsg: `loadSubpackage: ${e.type}`
+                    });
+                }
+                console.log('[mpxAsyncSuspense]: load eror', e);
+                chunkPromise.current = null;
+                setStatus('error');
+            });
+        }
+    });
+    if (loaded) {
+        const Comp = asyncChunkMap.get(request);
+        return <Comp {...props}></Comp>;
+    }
+    else if (status === 'error') {
+        console.log('the status is:', status);
+        if (type === 'page') {
+            const Fallback = fallback || DefaultFallback;
+            return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>;
+        }
+        else {
+            const Fallback = loading;
+            return <Fallback {...props}></Fallback>;
+        }
+    }
+    else {
+        if (!chunkPromise.current) {
+            chunkPromise.current = getChildren();
+        }
+        if (type === 'page') {
+            const Fallback = loading || DefaultLoading;
+            return <PageWrapper><Fallback /></PageWrapper>;
+        }
+        else {
+            const Fallback = loading;
+            return <Fallback {...props}></Fallback>;
+        }
+    }
+};
+export default AsyncSuspense;

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

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ 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 });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

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

@@ -8,7 +8,7 @@ const globalEventState = {
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
-    const { y: navigationY = 0 } = navigation?.layout || {};
+    const { top: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;

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

@@ -35,7 +35,7 @@
  * ✔ bindtap
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
@@ -104,7 +104,7 @@ const timer = (data, time = 3000) => new Promise((resolve) => {
     }, time);
 });
 const Loading = ({ alone = false }) => {
-    const image = useRef(new Animated.Value(0)).current;
+    const image = useAnimatedValue(0);
     const rotate = image.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg']

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

@@ -91,7 +91,7 @@ const Input = forwardRef((props, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
-        if (inputValue !== value) {
+        if (value !== tmpValue.current) {
             const parsed = parseValue(value);
             tmpValue.current = parsed;
             setInputValue(parsed);

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

@@ -21,7 +21,7 @@ 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 });
     let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {

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

@@ -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 = {}, 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 || []);
@@ -62,6 +62,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     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);
@@ -99,6 +100,15 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             layoutRef
         }, propsRef.current));
     }, []);
+    // 节流版本的 change 事件触发
+    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastChangeTime.value >= changeThrottleTime) {
+            lastChangeTime.value = now;
+            runOnJS(handleTriggerChange)({ x, y, type });
+        }
+    }, [changeThrottleTime]);
     useEffect(() => {
         runOnUI(() => {
             if (offsetX.value !== x || offsetY.value !== y) {
@@ -119,7 +129,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                         })
                         : newY;
                 }
-                if (propsRef.current.bindchange) {
+                if (bindchange) {
                     runOnJS(handleTriggerChange)({
                         x: newX,
                         y: newY,
@@ -223,14 +233,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) => {
@@ -252,11 +262,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') {
@@ -278,6 +290,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
+        const { bindtouchend, catchtouchend } = propsRef.current;
         extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
@@ -350,8 +363,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     offsetY.value = newY;
                 }
             }
-            if (propsRef.current.bindchange) {
-                runOnJS(handleTriggerChange)({
+            if (bindchange) {
+                // 使用节流版本减少 runOnJS 调用
+                handleTriggerChangeThrottled({
                     x: offsetX.value,
                     y: offsetY.value
                 });
@@ -390,47 +404,48 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                             })
                             : y;
                     }
-                    if (propsRef.current.bindchange) {
+                    if (bindchange) {
                         runOnJS(handleTriggerChange)({
                             x,
                             y
                         });
                     }
                 }
-                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 (propsRef.current.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 (propsRef.current.bindchange) {
-                        runOnJS(handleTriggerChange)({
-                            x: offsetX.value,
-                            y: offsetY.value
-                        });
-                    }
-                });
+            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);

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

@@ -56,6 +56,9 @@ const _RichText = forwardRef((props, ref) => {
         source: { html: generateHTML(html) },
         onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
+        },
+        style: {
+            backgroundColor: 'transparent'
         }
     }));
     if (hasPositionFixed) {

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

@@ -32,6 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn, hasOwn } from '@mpxjs/utils';
@@ -40,9 +41,11 @@ import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'refresher-threshold': refresherThreshold = 45, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
+    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -90,12 +93,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         },
         gestureRef: scrollViewRef
     });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const contextValue = useMemo(() => {
         return {
-            gestureRef: scrollViewRef
+            gestureRef: scrollViewRef,
+            scrollOffset
         };
     }, []);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     const hasRefresherLayoutRef = useRef(false);
     // layout 完成前先隐藏，避免安卓闪烁问题
     const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {}; }, [hasRefresherLayoutRef.current]);
@@ -321,6 +325,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         updateScrollOptions(e, { scrollLeft, scrollTop });
         updateIntersection();
     }
+    const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+        useNativeDriver: true,
+        listener: (event) => {
+            onScroll(event);
+        }
+    });
     function onScrollDragStart(e) {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
@@ -481,7 +491,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
         ref: scrollViewRef,
-        onScroll: onScroll,
+        onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -523,13 +533,14 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollView, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
+    const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
+    const withRefresherScrollView = createElement(GestureDetector, { gesture: panGesture }, createElement(ScrollViewComponent, innerProps, createElement(Animated.View, { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout }, refresherContent), createElement(Animated.View, { style: contentAnimatedStyle }, createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(extendObject({}, props, { children: otherContent }), {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })))));
-    const commonScrollView = createElement(ScrollView, extendObject(innerProps, {
+    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
+import { Animated, StyleSheet, useAnimatedValue } from 'react-native';
+import { ScrollViewContext, StickyContext } from './context';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
+    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const scrollViewContext = useContext(ScrollViewContext);
+    const stickyContext = useContext(StickyContext);
+    const { scrollOffset } = scrollViewContext;
+    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
+    const headerRef = useRef(null);
+    const isStickOnTopRef = useRef(false);
+    const id = useId();
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const headerTopAnimated = useAnimatedValue(0);
+    // harmony animatedValue 不支持通过 _value 访问
+    const headerTopRef = useRef(0);
+    useEffect(() => {
+        registerStickyHeader({ key: id, updatePosition });
+        return () => {
+            unregisterStickyHeader(id);
+        };
+    }, []);
+    function updatePosition() {
+        if (headerRef.current) {
+            const scrollViewRef = scrollViewContext.gestureRef;
+            if (scrollViewRef && scrollViewRef.current) {
+                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
+                    Animated.timing(headerTopAnimated, {
+                        toValue: top,
+                        duration: 0,
+                        useNativeDriver: true
+                    }).start();
+                    headerTopRef.current = top;
+                });
+            }
+            else {
+                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
+            }
+        }
+    }
+    function onLayout(e) {
+        updatePosition();
+    }
+    useNodesRef(props, ref, headerRef, {
+        style: normalStyle
+    });
+    useEffect(() => {
+        if (!bindstickontopchange)
+            return;
+        const listener = scrollOffset.addListener((state) => {
+            const currentScrollValue = state.value;
+            const newIsStickOnTop = currentScrollValue > headerTopRef.current;
+            if (newIsStickOnTop !== isStickOnTopRef.current) {
+                isStickOnTopRef.current = newIsStickOnTop;
+                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
+                    detail: {
+                        isStickOnTop: newIsStickOnTop
+                    },
+                    layoutRef
+                }, props));
+            }
+        });
+        return () => {
+            scrollOffset.removeListener(listener);
+        };
+    }, []);
+    const animatedStyle = useMemo(() => {
+        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'extend'
+        });
+        const finalTranslateY = offsetTop === 0
+            ? translateY
+            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetTop],
+                extrapolate: 'clamp'
+            }));
+        return {
+            transform: [{ translateY: finalTranslateY }]
+        };
+    }, [scrollOffset, headerTopAnimated, offsetTop]);
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: headerRef,
+        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+            paddingTop: padding[0] || 0,
+            paddingRight: padding[1] || 0,
+            paddingBottom: padding[2] || 0,
+            paddingLeft: padding[3] || 0
+        })
+    }, layoutProps), [], { layoutRef });
+    return (createElement(Animated.View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        zIndex: 10
+    }
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -0,0 +1,45 @@
+import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { StickyContext } from './context';
+import useInnerProps from './getInnerListeners';
+const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const sectionRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const stickyHeaders = useRef(new Map());
+    const registerStickyHeader = useCallback((item) => {
+        stickyHeaders.current.set(item.id, item);
+    }, []);
+    const unregisterStickyHeader = useCallback((id) => {
+        stickyHeaders.current.delete(id);
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerStickyHeader,
+        unregisterStickyHeader
+    }), []);
+    useNodesRef(props, ref, sectionRef, {
+        style: normalStyle
+    });
+    function onLayout() {
+        stickyHeaders.current.forEach(item => {
+            item.updatePosition();
+        });
+    }
+    const innerProps = useInnerProps(extendObject({}, props, {
+        style: extendObject(innerStyle, layoutStyle),
+        ref: sectionRef
+    }, layoutProps), [], { layoutRef });
+    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }))));
+});
+_StickySection.displayName = 'MpxStickySection';
+export default _StickySection;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -2,7 +2,7 @@ import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated
 import { forwardRef, useRef, useContext, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject, isHarmony } from './utils';
 import { SwiperContext } from './context';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-var': enableVar, 'external-var-context': externalVarContext, style, customStyle, itemIndex } = props;
@@ -29,7 +29,7 @@ const _SwiperItem = forwardRef((props, ref) => {
         'style'
     ], { layoutRef });
     const itemAnimatedStyle = useAnimatedStyle(() => {
-        if (!step.value)
+        if (!step.value && !isHarmony)
             return {};
         const inputRange = [step.value, 0];
         const outputRange = [0.7, 1];