@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.1

package/lib/runtime/components/react/dist/mpx-page-container.jsx

@@ -0,0 +1,255 @@
+import { createElement, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, Dimensions, TouchableWithoutFeedback, PanResponder } from 'react-native';
+import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
+import { extendObject, useLayout, useNavigation } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const screenHeight = Dimensions.get('window').height;
+const screenWidth = Dimensions.get('window').width;
+function nextTick(cb) {
+    setTimeout(cb, 0);
+}
+export default forwardRef((props, ref) => {
+    const { show, duration = 300, 'z-index': zIndex = 100, overlay = true, position = 'bottom', round = false, 'close-on-slide-down': closeOnSlideDown = false, 'overlay-style': overlayStyle, 'custom-style': customStyle, bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter, bindenter, bindafterenter, bindbeforeleave, bindleave, bindafterleave, bindclickoverlay, children } = props;
+    const isFirstRenderFlag = useRef(true);
+    const isFirstRender = isFirstRenderFlag.current;
+    if (isFirstRenderFlag.current) {
+        isFirstRenderFlag.current = false;
+    }
+    const close = () => {
+        bindclose(getCustomEvent('close', {}, { detail: { value: false, source: 'close' } }, props));
+    };
+    const [internalVisible, setInternalVisible] = useState(show); // 控制组件是否挂载
+    const overlayOpacity = useRef(new Animated.Value(0)).current;
+    const contentOpacity = useRef(new Animated.Value(position === 'center' ? 0 : 1)).current;
+    const contentTranslate = useRef(new Animated.Value(getInitialPosition())).current;
+    const currentAnimation = useRef(null);
+    function getInitialPosition() {
+        switch (position) {
+            case 'top':
+                return -screenHeight;
+            case 'bottom':
+                return screenHeight;
+            case 'right':
+                return screenWidth;
+            case 'center':
+                return 0;
+            default:
+                return screenHeight;
+        }
+    }
+    const currentTick = useRef(0);
+    function createTick() {
+        currentTick.current++;
+        console.log('currentTick.current++', currentTick.current);
+        const current = currentTick.current;
+        return () => {
+            console.log('currentTick.current', currentTick.current, 'current', current);
+            return currentTick.current === current;
+        };
+    }
+    // 播放入场动画
+    const animateIn = () => {
+        const isCurrentTick = createTick();
+        const animateOutFinish = currentAnimation.current === null;
+        if (!animateOutFinish) {
+            currentAnimation.current.forEach((animation) => animation.stop());
+        }
+        const animations = [
+            Animated.timing(contentTranslate, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(contentOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(overlayOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        currentAnimation.current = animations;
+        // 所有生命周期需相隔一个nextTick以保证在生命周期中修改show可在组件内部监听到
+        bindbeforeenter && bindbeforeenter(getCustomEvent('beforeenter', {}, { detail: { value: false, source: 'beforeenter' } }, props));
+        nextTick(() => {
+            bindenter && bindenter(getCustomEvent('enter', {}, { detail: { value: false, source: 'enter' } }, props));
+            // 与微信对其， bindenter 需要执行，所以 isCurrentTick 放在后面
+            if (!isCurrentTick())
+                return;
+            console.log('animateIn start');
+            // 设置为动画初始状态(特殊情况， 如果退场动画没有结束 或者 退场动画还未开始，则无需初始化，而是从当前位置完成动画)
+            if (animateOutFinish) {
+                contentTranslate.setValue(getInitialPosition());
+                contentOpacity.setValue(position === 'center' ? 0 : 1);
+            }
+            Animated.parallel(animations).start(() => {
+                bindafterenter && bindafterenter(getCustomEvent('afterenter', {}, { detail: { value: false, source: 'afterenter' } }, props));
+            });
+        });
+    };
+    // 播放离场动画
+    const animateOut = () => {
+        const isCurrentTick = createTick();
+        // 停止入场动画
+        currentAnimation.current?.forEach((animation) => animation.stop());
+        const animations = [Animated.timing(overlayOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        if (position === 'center') {
+            animations.push(Animated.timing(contentOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        else {
+            animations.push(Animated.timing(contentTranslate, {
+                toValue: getInitialPosition(),
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        currentAnimation.current = animations;
+        bindbeforeleave && bindbeforeleave(getCustomEvent('beforeleave', {}, { detail: { value: false, source: 'beforeleave' } }, props));
+        nextTick(() => {
+            bindleave && bindleave(getCustomEvent('leave', {}, { detail: { value: false, source: 'leave' } }, props));
+            if (!isCurrentTick())
+                return;
+            console.log('animateOut start');
+            Animated.parallel(animations).start(() => {
+                currentAnimation.current = null;
+                bindafterleave && bindafterleave(getCustomEvent('afterleave', {}, { detail: { value: false, source: 'afterleave' } }, props));
+                setInternalVisible(false); // 动画播放完后，才卸载
+            });
+        });
+    };
+    useEffect(() => {
+        console.log('====comp show', show, 'internalVisible', internalVisible);
+        // 如果展示状态和挂载状态一致，则不需要做任何操作
+        if (show) {
+            setInternalVisible(true); // 确保挂载
+            animateIn();
+        }
+        else {
+            if (!isFirstRender)
+                animateOut();
+        }
+    }, [show]);
+    const navigation = useNavigation();
+    usePreventRemove(show, (event) => {
+        const { data } = event;
+        if (show) {
+            close();
+        }
+        else {
+            navigation?.dispatch(data.action);
+        }
+    });
+    // IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+    useEffect(() => {
+        navigation?.setOptions({
+            gestureEnabled: !show
+        });
+    }, [show]);
+    const SCREEN_EDGE_THRESHOLD = 60; // 从屏幕左侧 30px 内触发
+    // 内容区 手势下滑关闭
+    const contentPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { dx, dy } = gestureState;
+            return dy > 200 && Math.abs(dx) < 60;
+        },
+        onPanResponderRelease: () => {
+            close();
+        }
+    });
+    // 全屏幕 IOS 右滑手势返回
+    const screenPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { moveX, dx, dy } = gestureState;
+            const isFromEdge = moveX < SCREEN_EDGE_THRESHOLD;
+            const isHorizontalSwipe = dx > 10 && Math.abs(dy) < 20;
+            return isFromEdge && isHorizontalSwipe;
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dx > 100) {
+                close();
+            }
+        }
+    });
+    const getTransformStyle = () => {
+        switch (position) {
+            case 'top':
+            case 'bottom':
+                return { transform: [{ translateY: contentTranslate }] };
+            case 'right':
+                return { transform: [{ translateX: contentTranslate }] };
+            case 'center':
+                return {};
+        }
+    };
+    const renderMask = () => {
+        const onPress = () => {
+            close();
+            bindclickoverlay && bindclickoverlay(getCustomEvent('clickoverlay', {}, { detail: { value: false, source: 'clickoverlay' } }, props));
+        };
+        return createElement(TouchableWithoutFeedback, { onPress }, createElement(Animated.View, { style: [styles.overlay, overlayStyle, { opacity: overlayOpacity }] }));
+    };
+    const renderContent = (children) => {
+        const contentProps = extendObject({
+            style: [
+                styles.container,
+                round ? styles.rounded : null,
+                positionStyle[position],
+                customStyle,
+                getTransformStyle(),
+                { opacity: contentOpacity }
+            ]
+        }, closeOnSlideDown ? contentPanResponder.panHandlers : null);
+        return createElement(Animated.View, contentProps, children);
+    };
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef });
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: nodeRef
+    }, layoutProps), [], { layoutRef });
+    const wrapperProps = extendObject(innerProps, {
+        style: [styles.wrapper, { zIndex }]
+    }, __mpx_mode__ === 'ios' ? screenPanResponder.panHandlers : {});
+    // TODO 是否有必要支持refs? dataset?
+    return createElement(Portal, null, internalVisible
+        ? createElement(Animated.View, wrapperProps, overlay ? renderMask() : null, renderContent(children))
+        : null);
+});
+const styles = StyleSheet.create({
+    wrapper: extendObject({
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+    }, StyleSheet.absoluteFillObject),
+    overlay: extendObject({
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    }, StyleSheet.absoluteFillObject),
+    container: {
+        position: 'absolute',
+        backgroundColor: 'white'
+    },
+    rounded: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+    }
+});
+const positionStyle = {
+    bottom: { bottom: 0, width: '100%', height: 'auto' },
+    top: { top: 0, width: '100%', height: 'auto' },
+    right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+    center: extendObject({}, StyleSheet.absoluteFillObject)
+};

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, 'scroll-into-view-offset': scrollIntoViewOffset = 0, __selectRef } = props;
+    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -66,7 +69,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
-    const firstScrollIntoViewChange = useRef(false);
+    const firstScrollIntoViewChange = useRef(true);
     const refreshColor = {
         black: ['#000'],
         white: ['#fff']
@@ -86,16 +89,18 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo
+            scrollTo,
+            scrollIntoView: handleScrollIntoView
         },
         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]);
@@ -115,14 +120,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, [scrollTop, scrollLeft]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
-            if (!firstScrollIntoViewChange.current) {
-                setTimeout(handleScrollIntoView);
+            if (firstScrollIntoViewChange.current) {
+                setTimeout(() => {
+                    handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
+                });
             }
             else {
-                handleScrollIntoView();
+                handleScrollIntoView(scrollIntoView, { offset: scrollIntoViewOffset, animated: scrollWithAnimation });
             }
         }
-        firstScrollIntoViewChange.current = true;
+        firstScrollIntoViewChange.current = false;
     }, [scrollIntoView]);
     useEffect(() => {
         if (refresherEnabled) {
@@ -142,13 +149,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function scrollTo({ top = 0, left = 0, animated = false }) {
         scrollToOffset(left, top, animated);
     }
-    function handleScrollIntoView() {
-        const refs = __selectRef(`#${scrollIntoView}`, 'node');
+    function handleScrollIntoView(selector = '', { offset = 0, animated = true } = {}) {
+        const refs = __selectRef(`#${selector}`, 'node');
         if (!refs)
             return;
         const { nodeRef } = refs.getNodeInstance();
         nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
-            scrollToOffset(left, top);
+            const adjustedLeft = scrollX ? left + offset : left;
+            const adjustedTop = scrollY ? top + offset : top;
+            scrollToOffset(adjustedLeft, adjustedTop, animated);
         });
     }
     function selectLength(size) {
@@ -321,6 +330,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 +496,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 +538,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,117 @@
+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,
+        // harmony 需要手动设置 relative， zIndex 才生效
+        position: 'relative'
+    }
+});
+_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.jsx

@@ -71,7 +71,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, bindchange } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -330,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
             props.bindchange && props.bindchange(eventData);
+            bindchange && bindchange(eventData);
         }
     }
     function getOffset(index, stepValue) {
@@ -373,7 +374,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && props.bindchange) {
+        if (newIndex !== preIndex && bindchange) {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });