@mpxjs/webpack-plugin 2.10.4 → 2.10.5-beta.1

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useContext, useEffect } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect, createElement } from 'react';
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import PickerSelector from './selector';
@@ -9,7 +9,7 @@ import PickerRegion from './region';
 import { FormContext, RouteContext } from '../context';
 import useNodesRef from '../useNodesRef';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
-import { extendObject } from '../utils';
+import { extendObject, useLayout } from '../utils';
 import { createPopupManager } from '../mpx-popup';
 /**
  * ✔ mode
@@ -109,17 +109,18 @@ const Picker = forwardRef((props, ref) => {
     const buttonText = buttonTextMap[global.__mpx?.i18n?.locale || 'zh-CN'];
     const pickerValue = useRef(value);
     pickerValue.current = Array.isArray(value) ? value.slice() : value;
-    const innerLayout = useRef({});
     const nodeRef = useRef(null);
     const pickerRef = useRef(null);
     const { open, show, hide, remove } = useRef(createPopupManager()).current;
     useNodesRef(props, ref, nodeRef);
-    const innerProps = useInnerProps(props, {
+    const { layoutRef, layoutProps } = useLayout({
+        props,
+        hasSelfPercent: false,
+        nodeRef
+    });
+    const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, [], { layoutRef: innerLayout });
-    const getInnerLayout = (layout) => {
-        innerLayout.current = layout.current;
-    };
+    }, layoutProps), [], { layoutRef });
     useEffect(() => {
         if (range && pickerRef.current && mode === "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
             pickerRef.current.updateRange?.(range);
@@ -162,7 +163,7 @@ const Picker = forwardRef((props, ref) => {
         if (mode !== "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
             return;
         }
-        const eventData = getCustomEvent('columnchange', {}, { detail: { column: columnIndex, value }, layoutRef: innerLayout });
+        const eventData = getCustomEvent('columnchange', {}, { detail: { column: columnIndex, value }, layoutRef });
         props.bindcolumnchange?.(eventData);
     };
     const onCancel = () => {
@@ -170,7 +171,7 @@ const Picker = forwardRef((props, ref) => {
         hide();
     };
     const onConfirm = () => {
-        const eventData = getCustomEvent('change', {}, { detail: { value: pickerValue.current }, layoutRef: innerLayout });
+        const eventData = getCustomEvent('change', {}, { detail: { value: pickerValue.current }, layoutRef });
         bindchange?.(eventData);
         hide();
     };
@@ -179,7 +180,6 @@ const Picker = forwardRef((props, ref) => {
         children,
         bindchange: onChange,
         bindcolumnchange: onColumnChange,
-        getInnerLayout,
         getRange: () => range
     });
     const renderPickerContent = () => {
@@ -215,9 +215,7 @@ const Picker = forwardRef((props, ref) => {
             remove();
         };
     }, []);
-    return (<TouchableWithoutFeedback onPress={show}>
-        {children}
-      </TouchableWithoutFeedback>);
+    return createElement(TouchableWithoutFeedback, { onPress: show }, createElement(View, innerProps, children));
 });
 Picker.displayName = 'MpxPicker';
 export default Picker;

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

@@ -1,9 +1,10 @@
 import { View } from 'react-native';
-import React, { forwardRef, useRef } from 'react';
+import React, { createElement, forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
 import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from '../utils';
 import { PickerViewStyleContext } from './pickerVIewContext';
+import Portal from '../mpx-portal';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -23,7 +24,7 @@ const _PickerView = forwardRef((props, ref) => {
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
     const snapActiveValueRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
@@ -47,13 +48,12 @@ const _PickerView = forwardRef((props, ref) => {
             snapActiveValueRef.current = value.slice();
         }
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        }),
-        layoutProps
+        })
     }), [
         'enable-offset',
         'indicator-style',
@@ -115,11 +115,11 @@ const _PickerView = forwardRef((props, ref) => {
         onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    return (<PickerViewStyleContext.Provider value={textStyle}>
-      <View {...innerProps}>
-        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-      </View>
-    </PickerViewStyleContext.Provider>);
+    const finalComponent = createElement(PickerViewStyleContext.Provider, { value: textStyle }, createElement(View, innerProps, createElement(View, { style: [styles.wrapper] }, renderPickerColumns())));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from '../utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils';
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
@@ -143,9 +143,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH]);
     const onScrollEndDrag = useCallback((e) => {
         dragging.current = false;
-        if (isIOS) {
+        if (!isAndroid) {
             const { y } = e.nativeEvent.contentOffset;
-            if (y % itemRawH === 0) {
+            if (y % itemRawH === 0 || (isHarmony && y > snapToOffsets[maxIndex])) {
                 onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
             }
             else if (y > 0 && y < snapToOffsets[maxIndex]) {
@@ -220,11 +220,28 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
-        return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} onTouchStart={onClickOnceItem} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
-          {renderInnerchild()}
-        </Reanimated.ScrollView>
-      </PickerViewColumnAnimationContext.Provider>);
+        const innerProps = extendObject({}, layoutProps, {
+            ref: scrollViewRef,
+            bounces: true,
+            horizontal: false,
+            nestedScrollEnabled: true,
+            removeClippedSubviews: false,
+            showsVerticalScrollIndicator: false,
+            showsHorizontalScrollIndicator: false,
+            scrollEventThrottle: 16,
+            style: styles.scrollView,
+            decelerationRate: 'fast',
+            snapToOffsets: snapToOffsets,
+            onTouchEnd: onClickOnceItem,
+            onScroll,
+            onScrollBeginDrag,
+            onScrollEndDrag,
+            onMomentumScrollBegin,
+            onMomentumScrollEnd,
+            onContentSizeChange,
+            contentContainerStyle
+        });
+        return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
     };
     const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
@@ -235,7 +252,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     </View>);
 });
 const styles = StyleSheet.create({
-    wrapper: { display: 'flex', flex: 1 }
+    wrapper: { display: 'flex', flex: 1 },
+    scrollView: { width: '100%' }
 });
 _PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;

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

@@ -8,6 +8,7 @@ import { FormContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import Portal from './mpx-portal';
 const radioGroup = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
@@ -23,7 +24,7 @@ const radioGroup = forwardRef((props, ref) => {
         flexWrap: 'wrap'
     };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -71,16 +72,22 @@ 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, {
+    const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
+        value: contextValue
+    }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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

@@ -12,6 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import Icon from './mpx-icon';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
@@ -73,7 +74,7 @@ const Radio = forwardRef((radioProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Radio does not support background image-related styles!');
@@ -91,10 +92,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',
@@ -124,7 +124,7 @@ const Radio = forwardRef((radioProps, ref) => {
             }
         }
     }, [checked]);
-    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
         type: 'success',
         size: 24,
         color: disabled ? '#E1E1E1' : color,
@@ -135,6 +135,10 @@ const Radio = forwardRef((radioProps, ref) => {
         textStyle,
         textProps
     }));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Radio.displayName = 'MpxRadio';
 export default Radio;

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

@@ -8,6 +8,7 @@ import useNodesRef from '../useNodesRef'; // 引入辅助函数
 import { useTransformStyle, useLayout, extendObject } from '../utils';
 import { WebView } from 'react-native-webview';
 import { generateHTML } from './html';
+import Portal from '../mpx-portal';
 function jsonToHtmlStr(elements) {
     let htmlStr = '';
     for (const element of elements) {
@@ -30,7 +31,7 @@ const _RichText = forwardRef((props, ref) => {
     const { style = {}, nodes, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
     const [webViewHeight, setWebViewHeight] = useState(0);
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(Object.assign({
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(Object.assign({
         width: '100%',
         height: webViewHeight
     }, style), {
@@ -44,19 +45,23 @@ 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);
-    return createElement(View, innerProps, createElement(WebView, {
+    let finalComponent = createElement(View, innerProps, createElement(WebView, {
         source: { html: generateHTML(html) },
         onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
         }
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _RichText.displayName = 'mpx-rich-text';
 export default _RichText;

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

@@ -32,16 +32,20 @@
  * ✔ 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 } from '@mpxjs/utils';
+import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 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);
@@ -72,7 +76,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     };
     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 { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
     useNodesRef(props, ref, scrollViewRef, {
@@ -89,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]);
@@ -320,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;
@@ -464,7 +475,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     })
         .simultaneousWithExternalGesture(scrollViewRef);
     const scrollAdditionalProps = extendObject({
-        style: extendObject({}, innerStyle, layoutStyle),
+        style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
+            ? {}
+            : {
+                flexGrow: 0
+            }, innerStyle, layoutStyle),
         pinchGestureEnabled: false,
         alwaysBounceVertical: false,
         alwaysBounceHorizontal: false,
@@ -476,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,
@@ -491,7 +506,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled
         });
     }
-    const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [
         'id',
         'scroll-x',
         'scroll-y',
@@ -518,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,
@@ -540,7 +556,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         textStyle,
         textProps
     })));
-    return hasRefresher ? withRefresherScrollView : commonScrollView;
+    let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView;
+    if (hasPositionFixed) {
+        scrollViewComponent = createElement(Portal, null, scrollViewComponent);
+    }
+    return scrollViewComponent;
 });
 _ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

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

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

@@ -1,13 +1,13 @@
 import { View } from 'react-native';
 import { createElement } from 'react';
-import { splitProps, splitStyle, wrapChildren } from './utils';
+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 || {});
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, {
         style: innerStyle
-    }, []);
+    }));
     return createElement(View, innerProps, wrapChildren(props, {
         hasVarDec: false,
         textStyle: textStyle,

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;