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

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

@@ -32,7 +32,6 @@
  * ✔ 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';
@@ -40,11 +39,9 @@ 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';
-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, 'enable-sticky': enableSticky, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
-    const scrollOffset = useRef(new RNAnimated.Value(0)).current;
+    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 simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const snapScrollTop = useRef(0);
@@ -92,13 +89,12 @@ 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,
-            scrollOffset
+            gestureRef: scrollViewRef
         };
     }, []);
+    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]);
@@ -324,12 +320,6 @@ 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;
@@ -486,7 +476,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
         bounces: false,
         ref: scrollViewRef,
-        onScroll: enableSticky ? scrollHandler : onScroll,
+        onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
         bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
         bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -528,14 +518,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'bindscrolltolower',
         'bindrefresherrefresh'
     ], { layoutRef });
-    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 }), {
+    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 }), {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })))));
-    const commonScrollView = createElement(ScrollViewComponent, extendObject({}, innerProps, {
+    const commonScrollView = createElement(ScrollView, extendObject(innerProps, {
         refreshControl: refresherEnabled
             ? createElement(RefreshControl, extendObject({
                 progressBackgroundColor: refresherBackground,

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

@@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
-import { error } from '@mpxjs/utils';
+import { error, isFunction } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Portal from './mpx-portal';
@@ -543,7 +543,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation, catchtransitionend, bindtransitionend } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -575,10 +575,17 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    const transitionend = isFunction(catchtransitionend)
+        ? catchtransitionend
+        : isFunction(bindtransitionend)
+            ? bindtransitionend
+            : undefined;
     const { enableStyleAnimation, animationStyle } = useAnimationHooks({
-        enableAnimation,
+        layoutRef,
         animation,
-        style: viewStyle
+        enableAnimation,
+        style: viewStyle,
+        transitionend
     });
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,

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

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
 import { getCustomEvent } from './getInnerListeners';
@@ -74,17 +74,17 @@ const _WebView = forwardRef((props, ref) => {
         isNavigateBack.current = false;
     };
     const navigation = useNavigation();
-    // useEffect(() => {
-    //   let beforeRemoveSubscription:any
-    //   if (__mpx_mode__ !== 'ios') {
-    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    //   }
-    //   return () => {
-    //     if (isFunction(beforeRemoveSubscription)) {
-    //       beforeRemoveSubscription()
-    //     }
-    //   }
-    // }, [])
+    useEffect(() => {
+        let beforeRemoveSubscription;
+        if (__mpx_mode__ !== 'ios') {
+            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        }
+        return () => {
+            if (isFunction(beforeRemoveSubscription)) {
+                beforeRemoveSubscription();
+            }
+        };
+    }, []);
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -160,7 +160,7 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle?.trim();
                     if (title !== undefined) {
-                        navigation && navigation.setPageConfig({ navigationBarTitleText: title });
+                        navigation && navigation.setOptions({ title });
                     }
                 }
                 break;

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error, hasOwn } from '@mpxjs/utils';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
+import { error, hasOwn, collectDataset } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -140,7 +140,7 @@ function getTransformObj(transforms) {
     }, {});
 }
 export default function useAnimationHooks(props) {
-    const { style = {}, animation, enableAnimation } = props;
+    const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
     const enableAnimationRef = useRef(enableStyleAnimation);
     if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -249,10 +249,33 @@ export default function useAnimationHooks(props) {
             });
         });
     }
+    function withTimingCallback(finished, current, duration) {
+        if (!transitionend)
+            return;
+        const target = {
+            id: animation?.id || -1,
+            dataset: collectDataset(props),
+            offsetLeft: layoutRef?.current?.offsetLeft || 0,
+            offsetTop: layoutRef?.current?.offsetTop || 0
+        };
+        transitionend({
+            type: 'transitionend',
+            // elapsedTime 对齐wx 单位s
+            detail: { elapsedTime: duration ? duration / 1000 : 0, finished, current },
+            target,
+            currentTarget: target,
+            timeStamp: Date.now()
+        });
+    }
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
-            ? withTiming(value, { duration, easing }, callback)
+            ? withTiming(value, { duration, easing }, (finished, current) => {
+                callback(finished, current);
+                if (transitionend && finished) {
+                    runOnJS(withTimingCallback)(finished, current, duration);
+                }
+            })
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }

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

@@ -26,6 +26,7 @@ const unoVarDecRegExp = /^--un-/;
 const unoVarUseRegExp = /var\(--un-/;
 const calcUseRegExp = /calc\(/;
 const envUseRegExp = /env\(/;
+const filterRegExp = /(calc|env|%)/;
 const safeAreaInsetMap = {
     'safe-area-inset-top': 'top',
     'safe-area-inset-right': 'right',
@@ -181,10 +182,11 @@ function resolveVar(input, varContext) {
     });
     return global.__formatValue(replaced.source());
 }
-function transformVar(styleObj, varKeyPaths, varContext) {
+function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
     varKeyPaths.forEach((varKeyPath) => {
         setStyle(styleObj, varKeyPath, ({ target, key, value }) => {
             target[key] = resolveVar(value, varContext);
+            visitOther({ target, key, value: target[key], keyPath: varKeyPath });
         });
     });
 }
@@ -224,28 +226,33 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
-const stringifyProps = ['fontWeight'];
 function transformStringify(styleObj) {
-    stringifyProps.forEach((prop) => {
-        if (isNumber(styleObj[prop])) {
-            styleObj[prop] = '' + styleObj[prop];
-        }
-    });
+    if (isNumber(styleObj.fontWeight)) {
+        styleObj.fontWeight = '' + styleObj.fontWeight;
+    }
+}
+function transformPosition(styleObj, meta) {
+    if (styleObj.position === 'fixed') {
+        styleObj.position = 'absolute';
+        meta.hasPositionFixed = true;
+    }
 }
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
-    const normalStyleRef = useRef({});
-    const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
+    let hasSelfPercent = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
+    const percentKeyPaths = [];
+    const calcKeyPaths = [];
+    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     const navigation = useNavigation();
-    function varVisitor({ key, value, keyPath }) {
+    function varVisitor({ target, key, value, keyPath }) {
         if (keyPath.length === 1) {
             if (unoVarDecRegExp.test(key)) {
                 unoVarStyle[key] = value;
@@ -269,6 +276,33 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 hasVarUse = true;
                 varKeyPaths.push(keyPath.slice());
             }
+            else {
+                visitOther({ target, key, value, keyPath });
+            }
+        }
+    }
+    function envVisitor({ value, keyPath }) {
+        if (envUseRegExp.test(value)) {
+            envKeyPaths.push(keyPath.slice());
+        }
+    }
+    function calcVisitor({ value, keyPath }) {
+        if (calcUseRegExp.test(value)) {
+            calcKeyPaths.push(keyPath.slice());
+        }
+    }
+    function percentVisitor({ key, value, keyPath }) {
+        if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+            percentKeyPaths.push(keyPath.slice());
+        }
+    }
+    function visitOther({ target, key, value, keyPath }) {
+        if (filterRegExp.test(value)) {
+            [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }));
         }
     }
     // traverse var & generate normalStyle
@@ -289,96 +323,57 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         if (diffAndCloneA(varContextRef.current, newVarContext).diff) {
             varContextRef.current = newVarContext;
         }
-        transformVar(normalStyle, varKeyPaths, varContextRef.current);
+        transformVar(normalStyle, varKeyPaths, varContextRef.current, visitOther);
     }
     // apply unocss var
     if (unoVarKeyPaths.length) {
-        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle);
-    }
-    const { clone, diff } = diffAndCloneA(normalStyle, normalStyleRef.current);
-    if (diff) {
-        normalStyleRef.current = clone;
-        normalStyleChangedRef.current = !normalStyleChangedRef.current;
+        transformVar(normalStyle, unoVarKeyPaths, unoVarStyle, visitOther);
     }
-    const memoResult = useMemo(() => {
-        let hasSelfPercent = false;
-        let hasPositionFixed = false;
-        const percentKeyPaths = [];
-        const calcKeyPaths = [];
-        const envKeyPaths = [];
-        // transform can be memoized
-        function envVisitor({ value, keyPath }) {
-            if (envUseRegExp.test(value)) {
-                envKeyPaths.push(keyPath.slice());
-            }
-        }
-        function calcVisitor({ value, keyPath }) {
-            if (calcUseRegExp.test(value)) {
-                calcKeyPaths.push(keyPath.slice());
-            }
-        }
-        function percentVisitor({ key, value, keyPath }) {
-            if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-                hasSelfPercent = true;
-                percentKeyPaths.push(keyPath.slice());
-            }
-            else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
-                percentKeyPaths.push(keyPath.slice());
-            }
-        }
-        function transformPosition(styleObj) {
-            if (styleObj.position === 'fixed') {
-                hasPositionFixed = true;
-                styleObj.position = 'absolute';
-            }
+    const percentConfig = {
+        width,
+        height,
+        fontSize: normalStyle.fontSize,
+        parentWidth,
+        parentHeight,
+        parentFontSize
+    };
+    const positionMeta = {
+        hasPositionFixed: false
+    };
+    // apply env
+    transformEnv(normalStyle, envKeyPaths, navigation);
+    // apply percent
+    transformPercent(normalStyle, percentKeyPaths, percentConfig);
+    // apply calc
+    transformCalc(normalStyle, calcKeyPaths, (value, key) => {
+        if (PERCENT_REGEX.test(value)) {
+            const resolved = resolvePercent(value, key, percentConfig);
+            return typeof resolved === 'number' ? resolved : 0;
         }
-        // traverse env & calc & percent
-        traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
-        const percentConfig = {
-            width,
-            height,
-            fontSize: normalStyle.fontSize,
-            parentWidth,
-            parentHeight,
-            parentFontSize
-        };
-        // apply env
-        transformEnv(normalStyle, envKeyPaths, navigation);
-        // apply percent
-        transformPercent(normalStyle, percentKeyPaths, percentConfig);
-        // apply calc
-        transformCalc(normalStyle, calcKeyPaths, (value, key) => {
-            if (PERCENT_REGEX.test(value)) {
-                const resolved = resolvePercent(value, key, percentConfig);
-                return typeof resolved === 'number' ? resolved : 0;
+        else {
+            const formatted = global.__formatValue(value);
+            if (typeof formatted === 'number') {
+                return formatted;
             }
             else {
-                const formatted = global.__formatValue(value);
-                if (typeof formatted === 'number') {
-                    return formatted;
-                }
-                else {
-                    warn('calc() only support number, px, rpx, % temporarily.');
-                    return 0;
-                }
+                warn('calc() only support number, px, rpx, % temporarily.');
+                return 0;
             }
-        });
-        // apply position
-        transformPosition(normalStyle);
-        // transform number enum stringify
-        transformStringify(normalStyle);
-        return {
-            normalStyle,
-            hasSelfPercent,
-            hasPositionFixed
-        };
-    }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
-    return extendObject({
+        }
+    });
+    // apply position
+    transformPosition(normalStyle, positionMeta);
+    // transform number enum stringify
+    transformStringify(normalStyle);
+    return {
         hasVarDec,
         varContextRef,
         setWidth,
-        setHeight
-    }, memoResult);
+        setHeight,
+        normalStyle,
+        hasSelfPercent,
+        hasPositionFixed: positionMeta.hasPositionFixed
+    };
 }
 export function traverseStyle(styleObj, visitors) {
     const keyPath = [];
@@ -387,12 +382,7 @@ export function traverseStyle(styleObj, visitors) {
             target.forEach((value, index) => {
                 const key = String(index);
                 keyPath.push(key);
-                visitors.forEach(visitor => visitor({
-                    target,
-                    key,
-                    value,
-                    keyPath
-                }));
+                visitors.forEach(visitor => visitor({ target, key, value, keyPath }));
                 traverse(value);
                 keyPath.pop();
             });
@@ -451,18 +441,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                     const { y: navigationY = 0 } = navigation?.layout || {};
-                    layoutRef.current = {
-                        x,
-                        y: y - navigationY,
-                        width,
-                        height,
-                        offsetLeft,
-                        offsetTop: offsetTop - navigationY,
-                        _x: x,
-                        _y: y,
-                        _offsetLeft: offsetLeft,
-                        _offsetTop: offsetTop
-                    };
+                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
             onLayout && onLayout(e);

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { GestureResponderEvent, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, 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 } from '../utils'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -209,9 +209,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const onScrollEndDrag = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
     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]) {
         timerResetPosition.current = setTimeout(() => {