@mpxjs/webpack-plugin 2.10.4-beta.18 → 2.10.4-beta.19-input

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

@@ -0,0 +1,163 @@
+/**
+ * ✔ percent 进度百分比 0-100
+ * ✘ show-info 在进度条右侧显示百分比
+ * ✘ border-radius 圆角大小
+ * ✘ font-size 右侧百分比字体大小
+ * ✔ stroke-width 进度条线的宽度
+ * ✔ color 进度条颜色（请使用activeColor）
+ * ✔ activeColor 已选择的进度条的颜色
+ * ✔ backgroundColor 未选择的进度条的颜色
+ * ✔ active 进度条从左往右的动画
+ * ✔ active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播
+ * ✔ duration 进度增加1%所需毫秒数
+ * ✔ bindactiveend 动画完成事件
+ */
+import { useRef, forwardRef, useEffect, useState, createElement } from 'react';
+import { View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
+import Portal from './mpx-portal';
+const Progress = forwardRef((props, ref) => {
+    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const nodeRef = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    // 进度值状态
+    const [lastPercent, setLastPercent] = useState(0);
+    const progressWidth = useSharedValue(0);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef
+    });
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    // 使用 useRunOnJSCallback 处理动画回调
+    const runOnJSCallbackRef = useRef({
+        triggerActiveEnd: (percent) => {
+            const currentProps = propsRef.current;
+            if (currentProps.bindactiveend) {
+                currentProps.bindactiveend({
+                    type: 'activeend',
+                    detail: {
+                        percent: percent
+                    }
+                });
+            }
+        }
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
+    // 进度条动画函数
+    const startProgressAnimation = (targetPercent, startPercent, animationDuration, onFinished) => {
+        // 根据 active-mode 设置起始位置
+        progressWidth.value = startPercent;
+        progressWidth.value = withTiming(targetPercent, {
+            duration: animationDuration,
+            easing: Easing.linear
+        }, (finished) => {
+            if (finished && onFinished) {
+                // 在动画回调中，执行传入的worklet函数
+                onFinished();
+            }
+        });
+    };
+    // 进度变化时的动画效果
+    useEffect(() => {
+        const targetPercent = Math.max(0, Math.min(100, percent));
+        if (active) {
+            // 根据 active-mode 确定起始位置
+            let startPercent;
+            if (activeMode === 'backwards') {
+                startPercent = 0;
+            }
+            else {
+                // forwards 模式：使用上次记录的百分比作为起始位置
+                startPercent = lastPercent;
+            }
+            // 计算动画持续时间
+            const percentDiff = Math.abs(targetPercent - startPercent);
+            const animationDuration = percentDiff * duration;
+            // 执行动画
+            startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
+                'worklet';
+                // 在worklet函数内部执行runOnJS调用runOnJSCallback
+                runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent);
+            });
+        }
+        else {
+            progressWidth.value = targetPercent;
+        }
+        setLastPercent(targetPercent);
+    }, [percent, active, activeMode, duration]);
+    // 初始化时设置进度值
+    useEffect(() => {
+        if (!active) {
+            progressWidth.value = Math.max(0, Math.min(100, percent));
+        }
+    }, []);
+    // 进度条动画样式
+    const animatedProgressStyle = useAnimatedStyle(() => {
+        return {
+            width: `${progressWidth.value}%`
+        };
+    });
+    // 确保数值类型正确
+    const strokeWidthNum = typeof strokeWidth === 'number' ? strokeWidth : parseInt(strokeWidth, 10) || 6;
+    // 容器样式
+    const containerStyle = extendObject({}, {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: Math.max(strokeWidthNum, 20)
+    }, normalStyle, layoutStyle);
+    // 进度条背景样式
+    const progressBgStyle = {
+        width: '100%',
+        height: strokeWidthNum,
+        backgroundColor,
+        overflow: 'hidden'
+    };
+    // 进度条填充样式
+    const progressFillStyle = {
+        height: '100%',
+        backgroundColor: activeColor
+    };
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: nodeRef
+    }), [
+        'percent',
+        'stroke-width',
+        'color',
+        'activeColor',
+        'backgroundColor',
+        'active',
+        'active-mode',
+        'duration',
+        'bindactiveend'
+    ], { layoutRef });
+    const progressComponent = createElement(View, extendObject({}, innerProps, { style: containerStyle }), 
+    // 进度条背景
+    createElement(View, { style: progressBgStyle }, 
+    // 进度条填充
+    createElement(Animated.View, {
+        style: [progressFillStyle, animatedProgressStyle]
+    })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, progressComponent);
+    }
+    return progressComponent;
+});
+Progress.displayName = 'MpxProgress';
+export default Progress;

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 });
@@ -77,10 +78,16 @@ const radioGroup = forwardRef((props, ref) => {
     }), ['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!');
@@ -123,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,
@@ -134,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), {
@@ -51,12 +52,19 @@ const _RichText = forwardRef((props, ref) => {
         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);
+        },
+        style: {
+            backgroundColor: 'transparent'
         }
     }));
+    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

@@ -34,12 +34,13 @@
 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 Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
+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 { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE, useRunOnJSCallback } 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);
@@ -73,11 +74,29 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         black: ['#000'],
         white: ['#fff']
     };
+    const isContentSizeChange = useRef(false);
     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();
+    const scrollViewRef = useRef(null);
+    const propsRef = useRef(props);
+    const refresherStateRef = useRef({
+        hasRefresher,
+        refresherTriggered
+    });
+    propsRef.current = props;
+    refresherStateRef.current = {
+        hasRefresher,
+        refresherTriggered
+    };
+    const runOnJSCallbackRef = useRef({
+        setEnableScroll,
+        setScrollBounces,
+        setRefreshing,
+        onRefresh
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle,
         scrollOffset: scrollOptions,
@@ -205,7 +224,22 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onContentSizeChange(width, height) {
-        scrollOptions.current.contentLength = selectLength({ height, width });
+        isContentSizeChange.current = true;
+        const newContentLength = selectLength({ height, width });
+        const oldContentLength = scrollOptions.current.contentLength;
+        scrollOptions.current.contentLength = newContentLength;
+        // 内容高度变化时，Animated.event 的映射可能会有不生效的场景，所以需要手动设置一下 scrollOffset 的值
+        if (enableSticky && (__mpx_mode__ === 'android' || __mpx_mode__ === 'ios')) {
+            // 当内容变少时，检查当前滚动位置是否超出新的内容范围
+            if (newContentLength < oldContentLength) {
+                const { visibleLength, offset } = scrollOptions.current;
+                const maxOffset = Math.max(0, newContentLength - visibleLength);
+                // 如果当前滚动位置超出了新的内容范围，调整滚动offset
+                if (offset > maxOffset && scrollY) {
+                    scrollOffset.setValue(maxOffset);
+                }
+            }
+        }
     }
     function onLayout(e) {
         const layout = e.nativeEvent.layout || {};
@@ -225,8 +259,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     function onScroll(e) {
         const { bindscroll } = props;
-        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+        const { x: scrollLeft, y: scrollTop } = contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = contentSize;
         isAtTop.value = scrollTop <= 0;
         bindscroll &&
             bindscroll(getCustomEvent('scroll', e, {
@@ -236,7 +271,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                     scrollHeight,
                     scrollWidth,
                     deltaX: scrollLeft - scrollOptions.current.scrollLeft,
-                    deltaY: scrollTop - scrollOptions.current.scrollTop
+                    deltaY: scrollTop - scrollOptions.current.scrollTop,
+                    layoutMeasurement
                 },
                 layoutRef
             }, props));
@@ -249,8 +285,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
-        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+        const { x: scrollLeft, y: scrollTop } = contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = contentSize;
         isAtTop.value = scrollTop <= 0;
         bindscrollend &&
             bindscrollend(getCustomEvent('scrollend', e, {
@@ -258,7 +295,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                     scrollLeft,
                     scrollTop,
                     scrollHeight,
-                    scrollWidth
+                    scrollWidth,
+                    layoutMeasurement
                 },
                 layoutRef
             }, props));
@@ -284,20 +322,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             snapScrollTop.current = y;
         }
     }
-    function onScrollTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        if (enhanced) {
-            binddragstart &&
-                binddragstart(getCustomEvent('dragstart', e, {
-                    detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft,
-                        scrollTop: scrollOptions.current.scrollTop
-                    },
-                    layoutRef
-                }, props));
-        }
-    }
     function onScrollTouchMove(e) {
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
@@ -311,19 +335,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollTouchEnd(e) {
-        bindtouchend && bindtouchend(e);
-        if (enhanced) {
-            binddragend &&
-                binddragend(getCustomEvent('dragend', e, {
-                    detail: {
-                        scrollLeft: scrollOptions.current.scrollLeft || 0,
-                        scrollTop: scrollOptions.current.scrollTop || 0
-                    },
-                    layoutRef
-                }, props));
-        }
-    }
     function onScrollDrag(e) {
         const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
         updateScrollOptions(e, { scrollLeft, scrollTop });
@@ -332,6 +343,16 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const scrollHandler = RNAnimated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
         useNativeDriver: true,
         listener: (event) => {
+            const y = event.nativeEvent.contentOffset.y || 0;
+            // 内容高度变化时，鸿蒙中 listener 回调通过scrollOffset.__getValue获取值一直等于event.nativeEvent.contentOffset.y，值是正确的，但是无法触发 sticky 动画执行，所以需要手动再 set 一次
+            if (__mpx_mode__ === 'harmony') {
+                if (isContentSizeChange.current) {
+                    scrollOffset.setValue(y);
+                    setTimeout(() => {
+                        isContentSizeChange.current = false;
+                    }, 100);
+                }
+            }
             onScroll(event);
         }
     });
@@ -339,9 +360,34 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         hasCallScrollToLower.current = false;
         hasCallScrollToUpper.current = false;
         onScrollDrag(e);
+        if (enhanced) {
+            binddragstart &&
+                binddragstart(getCustomEvent('dragstart', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft,
+                        scrollTop: scrollOptions.current.scrollTop
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollDragEnd(e) {
+        onScrollDrag(e);
+        if (enhanced) {
+            // 安卓上如果触发了默认的下拉刷新，binddragend可能不触发，只会触发 binddragstart
+            binddragend &&
+                binddragend(getCustomEvent('dragend', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
+                    },
+                    layoutRef
+                }, props));
+        }
     }
     // 处理刷新
     function onRefresh() {
+        const { hasRefresher, refresherTriggered } = refresherStateRef.current;
         if (hasRefresher && refresherTriggered === undefined) {
             // 处理使用了自定义刷新组件，又没设置 refresherTriggered 的情况
             setRefreshing(true);
@@ -353,9 +399,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }
             }, 500);
         }
-        const { bindrefresherrefresh } = props;
+        const { bindrefresherrefresh } = propsRef.current;
         bindrefresherrefresh &&
-            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, propsRef.current));
     }
     function getRefresherContent(children) {
         let refresherContent = null;
@@ -403,7 +449,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'worklet';
         if (enableScrollValue.value !== newValue) {
             enableScrollValue.value = newValue;
-            runOnJS(setEnableScroll)(newValue);
+            runOnJS(runOnJSCallback)('setEnableScroll', newValue);
         }
     }
     const resetScrollState = (value) => {
@@ -414,7 +460,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'worklet';
         if (bouncesValue.value !== newValue) {
             bouncesValue.value = newValue;
-            runOnJS(setScrollBounces)(newValue);
+            runOnJS(runOnJSCallback)('setScrollBounces', newValue);
         }
     }
     // 处理下拉刷新的手势
@@ -459,7 +505,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
                 translateY.value = withTiming(0);
                 updateScrollState(true);
-                runOnJS(setRefreshing)(false);
+                runOnJS(runOnJSCallback)('setRefreshing', false);
             }
             else {
                 translateY.value = withTiming(refresherHeight.value);
@@ -468,18 +514,22 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         else if (event.translationY >= refresherHeight.value) {
             // 触发刷新
             translateY.value = withTiming(refresherHeight.value);
-            runOnJS(onRefresh)();
+            runOnJS(runOnJSCallback)('onRefresh');
         }
         else {
             // 回弹
             translateY.value = withTiming(0);
             updateScrollState(true);
-            runOnJS(setRefreshing)(false);
+            runOnJS(runOnJSCallback)('setRefreshing', false);
         }
     })
         .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,
@@ -490,14 +540,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         showsVerticalScrollIndicator: scrollY && showScrollbar,
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
+        overScrollMode: 'never',
         ref: scrollViewRef,
         onScroll: enableSticky ? scrollHandler : onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
-        bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
         onScrollBeginDrag: onScrollDragStart,
-        onScrollEndDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDragEnd,
         onMomentumScrollEnd: onScrollEnd
     }, (simultaneousHandlers ? { simultaneousHandlers } : {}), (waitForHandlers ? { waitFor: waitForHandlers } : {}), layoutProps);
     if (enhanced) {
@@ -556,7 +605,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;