@mpxjs/webpack-plugin 2.10.3-beta.6 → 2.10.4-beta.10

package/lib/runtime/components/react/dist/mpx-popup/popupBase.jsx

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { getWindowInfo } from '@mpxjs/api-proxy';
+import { useUpdateEffect } from '../utils';
+const windowInfo = getWindowInfo();
+const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom;
+const styles = StyleSheet.create({
+    mask: {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        position: 'absolute',
+        zIndex: 1000
+    },
+    content: {
+        backgroundColor: '#ffffff',
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        paddingBottom: bottom
+    },
+    buttonStyle: {
+        fontSize: 18,
+        paddingTop: 10,
+        paddingBottom: 10
+    }
+});
+const MASK_ON = 1;
+const MASK_OFF = 0;
+const MOVEOUT_HEIGHT = 330;
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+const PopupBase = (props = {}) => {
+    const { children, hide = () => null, contentHeight = MOVEOUT_HEIGHT, visible = false } = props;
+    const fade = useSharedValue(MASK_OFF);
+    const slide = useSharedValue(contentHeight);
+    const animatedStylesMask = useAnimatedStyle(() => ({
+        opacity: fade.value
+    }));
+    const animatedStylesContent = useAnimatedStyle(() => ({
+        transform: [{ translateY: slide.value }]
+    }));
+    const showAimation = () => {
+        fade.value = withTiming(MASK_ON, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+        slide.value = withTiming(0, {
+            easing: Easing.out(Easing.poly(3)),
+            duration: 300
+        });
+    };
+    const hideAnimation = () => {
+        fade.value = withTiming(MASK_OFF, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+        slide.value = withTiming(contentHeight, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+    };
+    useUpdateEffect(() => {
+        if (visible) {
+            showAimation();
+        }
+        else {
+            hideAnimation();
+        }
+    }, [visible]);
+    const preventMaskClick = (e) => {
+        e.stopPropagation();
+    };
+    return (<Animated.View onTouchEnd={hide} style={[
+            styles.mask,
+            animatedStylesMask,
+            { pointerEvents: visible ? 'auto' : 'none' }
+        ]}>
+      <Animated.View style={[styles.content, animatedStylesContent]} onTouchEnd={preventMaskClick}>
+        {children}
+      </Animated.View>
+    </Animated.View>);
+};
+PopupBase.displayName = 'MpxPopupBase';
+export default PopupBase;

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

@@ -71,10 +71,10 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), ['name'], {
+    }), ['name'], {
         layoutRef
     });
     return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {

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

@@ -91,10 +91,9 @@ const Radio = forwardRef((radioProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'value',

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

@@ -44,10 +44,10 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject(normalStyle, layoutStyle)
-    }, layoutProps), [], {
+    }), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);

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

@@ -10,7 +10,7 @@
  * ✔ enable-back-to-top
  * ✘ enable-passive
  * ✔ refresher-enabled
- * ✘ refresher-threshold
+ * ✔ refresher-threshold(仅自定义下拉节点样式支持)
  * ✔ refresher-default-style(仅 android 支持)
  * ✔ refresher-background(仅 android 支持)
  * ✔ refresher-triggered
@@ -31,22 +31,32 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-import { ScrollView, RefreshControl } from 'react-native-gesture-handler';
-import { useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react';
-import { useAnimatedRef } from 'react-native-reanimated';
+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 } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
+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, '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 [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
+    const [refreshing, setRefreshing] = useState(false);
+    const [enableScroll, setEnableScroll] = useState(true);
+    const enableScrollValue = useSharedValue(true);
+    const [scrollBounces, setScrollBounces] = useState(false);
+    const bouncesValue = useSharedValue(!!false);
+    const translateY = useSharedValue(0);
+    const isAtTop = useSharedValue(true);
+    const refresherHeight = useSharedValue(0);
     const scrollOptions = useRef({
         contentLength: 0,
         offset: 0,
@@ -59,6 +69,12 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
     const firstScrollIntoViewChange = useRef(false);
+    const refreshColor = {
+        black: ['#000'],
+        white: ['#fff']
+    };
+    const { refresherContent, otherContent } = getRefresherContent(props.children);
+    const hasRefresher = refresherContent && refresherEnabled;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
@@ -76,12 +92,16 @@ 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]);
     const lastOffset = useRef(0);
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
@@ -96,11 +116,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             };
         }
     }, [scrollTop, scrollLeft]);
-    useEffect(() => {
-        if (refreshing !== refresherTriggered) {
-            setRefreshing(!!refresherTriggered);
-        }
-    }, [refresherTriggered]);
     useEffect(() => {
         if (scrollIntoView && __selectRef) {
             if (!firstScrollIntoViewChange.current) {
@@ -112,6 +127,21 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
         firstScrollIntoViewChange.current = true;
     }, [scrollIntoView]);
+    useEffect(() => {
+        if (refresherEnabled) {
+            setRefreshing(!!refresherTriggered);
+            if (!refresherContent)
+                return;
+            if (refresherTriggered) {
+                translateY.value = withTiming(refresherHeight.value);
+                resetScrollState(false);
+            }
+            else {
+                translateY.value = withTiming(0);
+                resetScrollState(true);
+            }
+        }
+    }, [refresherTriggered]);
     function scrollTo({ top = 0, left = 0, animated = false }) {
         scrollToOffset(left, top, animated);
     }
@@ -192,6 +222,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const { bindscroll } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        isAtTop.value = scrollTop <= 0;
         bindscroll &&
             bindscroll(getCustomEvent('scroll', e, {
                 detail: {
@@ -215,6 +246,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         const { bindscrollend } = props;
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        isAtTop.value = scrollTop <= 0;
         bindscrollend &&
             bindscrollend(getCustomEvent('scrollend', e, {
                 detail: {
@@ -247,11 +279,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             snapScrollTop.current = y;
         }
     }
-    function onRefresh() {
-        const { bindrefresherrefresh } = props;
-        bindrefresherrefresh &&
-            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
-    }
     function onScrollTouchStart(e) {
         const { bindtouchstart } = props;
         bindtouchstart && bindtouchstart(e);
@@ -297,11 +324,155 @@ 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;
         onScrollDrag(e);
     }
+    // 处理刷新
+    function onRefresh() {
+        if (hasRefresher && refresherTriggered === undefined) {
+            // 处理使用了自定义刷新组件，又没设置 refresherTriggered 的情况
+            setRefreshing(true);
+            setTimeout(() => {
+                setRefreshing(false);
+                translateY.value = withTiming(0);
+                if (!enableScrollValue.value) {
+                    resetScrollState(true);
+                }
+            }, 500);
+        }
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    }
+    function getRefresherContent(children) {
+        let refresherContent = null;
+        const otherContent = [];
+        Children.forEach(children, (child) => {
+            if (isValidElement(child) && child.props.slot === 'refresher') {
+                refresherContent = child;
+            }
+            else {
+                otherContent.push(child);
+            }
+        });
+        return {
+            refresherContent,
+            otherContent
+        };
+    }
+    // 刷新控件的动画样式
+    const refresherAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: -refresherHeight.value,
+            transform: [{ translateY: Math.min(translateY.value, refresherHeight.value) }],
+            backgroundColor: refresherBackground || 'transparent'
+        };
+    });
+    // 内容区域的动画样式 - 只有内容区域需要下移
+    const contentAnimatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{
+                    translateY: translateY.value > refresherHeight.value
+                        ? refresherHeight.value
+                        : translateY.value
+                }]
+        };
+    });
+    function onRefresherLayout(e) {
+        const { height } = e.nativeEvent.layout;
+        refresherHeight.value = height;
+        hasRefresherLayoutRef.current = true;
+    }
+    function updateScrollState(newValue) {
+        'worklet';
+        if (enableScrollValue.value !== newValue) {
+            enableScrollValue.value = newValue;
+            runOnJS(setEnableScroll)(newValue);
+        }
+    }
+    const resetScrollState = (value) => {
+        enableScrollValue.value = value;
+        setEnableScroll(value);
+    };
+    function updateBouncesState(newValue) {
+        'worklet';
+        if (bouncesValue.value !== newValue) {
+            bouncesValue.value = newValue;
+            runOnJS(setScrollBounces)(newValue);
+        }
+    }
+    // 处理下拉刷新的手势
+    const panGesture = Gesture.Pan()
+        .onUpdate((event) => {
+        'worklet';
+        if (enhanced && !!bounces) {
+            if (event.translationY > 0 && bouncesValue.value) {
+                updateBouncesState(false);
+            }
+            else if ((event.translationY < 0) && !bouncesValue.value) {
+                updateBouncesState(true);
+            }
+        }
+        if (translateY.value <= 0 && event.translationY < 0) {
+            // 滑动到顶再向上开启滚动
+            updateScrollState(true);
+        }
+        else if (event.translationY > 0 && isAtTop.value) {
+            // 滚动到顶再向下禁止滚动
+            updateScrollState(false);
+        }
+        // 禁止滚动后切换为滑动
+        if (!enableScrollValue.value && isAtTop.value) {
+            if (refreshing) {
+                // 从完全展开状态(refresherHeight.value)开始计算偏移
+                translateY.value = Math.max(0, Math.min(refresherHeight.value, refresherHeight.value + event.translationY));
+            }
+            else if (event.translationY > 0) {
+                // 非刷新状态下的下拉逻辑保持不变
+                translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value);
+            }
+        }
+    })
+        .onEnd((event) => {
+        'worklet';
+        if (enableScrollValue.value)
+            return;
+        if (refreshing) {
+            // 刷新状态下，根据滑动距离决定是否隐藏
+            // 如果向下滑动没超过 refresherThreshold，就完全隐藏，如果向上滑动完全隐藏
+            if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
+                translateY.value = withTiming(0);
+                updateScrollState(true);
+                runOnJS(setRefreshing)(false);
+            }
+            else {
+                translateY.value = withTiming(refresherHeight.value);
+            }
+        }
+        else if (event.translationY >= refresherHeight.value) {
+            // 触发刷新
+            translateY.value = withTiming(refresherHeight.value);
+            runOnJS(onRefresh)();
+        }
+        else {
+            // 回弹
+            translateY.value = withTiming(0);
+            updateScrollState(true);
+            runOnJS(setRefreshing)(false);
+        }
+    })
+        .simultaneousWithExternalGesture(scrollViewRef);
     const scrollAdditionalProps = extendObject({
         style: extendObject({}, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
@@ -312,9 +483,10 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollsToTop: enableBackToTop,
         showsHorizontalScrollIndicator: scrollX && showScrollbar,
         showsVerticalScrollIndicator: scrollY && showScrollbar,
-        scrollEnabled: scrollX || scrollY,
+        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,
@@ -325,11 +497,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {
         Object.assign(scrollAdditionalProps, {
-            bounces,
+            bounces: hasRefresher ? scrollBounces : !!bounces,
             pagingEnabled
         });
     }
-    const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
         'id',
         'scroll-x',
         'scroll-y',
@@ -356,17 +528,22 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    const refreshColor = {
-        black: ['#000'],
-        white: ['#fff']
-    };
-    return createElement(ScrollView, extendObject({}, innerProps, {
+    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(ScrollViewComponent, extendObject({}, innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,
                 refreshing: refreshing,
                 onRefresh: onRefresh
-            }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+            }, refresherDefaultStyle && refresherDefaultStyle !== 'none'
+                ? { colors: refreshColor[refresherDefaultStyle] }
+                : {}))
             : undefined
     }), createElement(ScrollViewContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
@@ -374,6 +551,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         textStyle,
         textProps
     })));
+    return hasRefresher ? withRefresherScrollView : commonScrollView;
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -1,11 +1,13 @@
 import { Text } from 'react-native';
 import { createElement } from 'react';
+import useInnerProps from './getInnerListeners';
 import { extendObject } from './utils';
-const _Text2 = (props) => {
-    const { allowFontScaling = false } = props;
-    return createElement(Text, extendObject({}, props, {
+const SimpleText = (props) => {
+    const { allowFontScaling = false, children } = props;
+    const innerProps = useInnerProps(extendObject({}, props, {
         allowFontScaling
     }));
+    return createElement(Text, innerProps, children);
 };
-_Text2.displayName = 'MpxSimpleText';
-export default _Text2;
+SimpleText.displayName = 'MpxSimpleText';
+export default SimpleText;

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

@@ -1,22 +1,18 @@
 import { View } from 'react-native';
-import { createElement, forwardRef, useRef } from 'react';
-import useNodesRef from './useNodesRef';
-import { extendObject, splitProps, splitStyle, wrapChildren } from './utils';
-const _View2 = forwardRef((simpleViewProps, ref) => {
-    const nodeRef = useRef(null);
+import { createElement } from 'react';
+import { splitProps, splitStyle, wrapChildren, extendObject } from './utils';
+import useInnerProps from './getInnerListeners';
+const SimpleView = (simpleViewProps) => {
     const { textProps, innerProps: props = {} } = splitProps(simpleViewProps);
     const { textStyle, innerStyle = {} } = splitStyle(props.style || {});
-    useNodesRef(props, ref, nodeRef, {
-        style: innerStyle || {}
-    });
-    return createElement(View, extendObject({}, props, {
-        style: innerStyle,
-        ref: nodeRef
-    }), wrapChildren(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
+        style: innerStyle
+    }));
+    return createElement(View, innerProps, wrapChildren(props, {
         hasVarDec: false,
         textStyle: textStyle,
         textProps
     }));
-});
-_View2.displayName = 'MpxSimpleView';
-export default _View2;
+};
+SimpleView.displayName = 'MpxSimpleView';
+export default SimpleView;

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;