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

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

@@ -4,8 +4,8 @@
  * ✔ out-of-bounds
  * ✔ x
  * ✔ y
- * ✔ damping
- * ✔ friction
+ * ✘ damping
+ * ✘ friction
  * ✔ disabled
  * ✘ scale
  * ✘ scale-min
@@ -22,98 +22,10 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
-// 超出边界处理函数，参考微信小程序的超出边界衰减效果
-const applyBoundaryDecline = (newValue, range) => {
-    'worklet';
-    const decline = (distance) => {
-        'worklet';
-        return Math.sqrt(Math.abs(distance));
-    };
-    if (newValue < range[0]) {
-        const overDistance = range[0] - newValue;
-        return range[0] - decline(overDistance);
-    }
-    else if (newValue > range[1]) {
-        const overDistance = newValue - range[1];
-        return range[1] + decline(overDistance);
-    }
-    return newValue;
-};
-// 参考微信小程序的弹簧阻尼系统实现
-const withWechatSpring = (toValue, dampingParam = 20, callback) => {
-    'worklet';
-    // 弹簧参数计算
-    const m = 1; // 质量
-    const k = 9 * Math.pow(dampingParam, 2) / 40; // 弹簧系数
-    const c = dampingParam; // 阻尼系数
-    // 判别式：r = c² - 4mk
-    const discriminant = c * c - 4 * m * k;
-    // 计算动画持续时间和缓动函数
-    let duration;
-    let easingFunction;
-    if (Math.abs(discriminant) < 0.01) {
-        // 临界阻尼 (discriminant ≈ 0)
-        // 使用cubic-out模拟临界阻尼的平滑过渡
-        duration = Math.max(350, Math.min(800, 2000 / dampingParam));
-        easingFunction = Easing.out(Easing.cubic);
-    }
-    else if (discriminant > 0) {
-        // 过阻尼 (discriminant > 0)
-        // 使用指数缓动模拟过阻尼的缓慢收敛
-        duration = Math.max(450, Math.min(1000, 2500 / dampingParam));
-        easingFunction = Easing.out(Easing.exp);
-    }
-    else {
-        // 欠阻尼 (discriminant < 0) - 会产生振荡
-        // 计算振荡频率和衰减率
-        const dampingRatio = c / (2 * Math.sqrt(m * k)); // 阻尼比
-        // 根据阻尼比调整动画参数
-        if (dampingRatio < 0.7) {
-            // 明显振荡
-            duration = Math.max(600, Math.min(1200, 3000 / dampingParam));
-            // 创建带振荡的贝塞尔曲线
-            easingFunction = Easing.bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        else {
-            // 轻微振荡
-            duration = Math.max(400, Math.min(800, 2000 / dampingParam));
-            easingFunction = Easing.bezier(0.25, 0.46, 0.45, 0.94);
-        }
-    }
-    return withTiming(toValue, {
-        duration,
-        easing: easingFunction
-    }, callback);
-};
-// 参考微信小程序friction的惯性动画
-const withWechatDecay = (velocity, currentPosition, clampRange, frictionValue = 2, callback) => {
-    'worklet';
-    // 微信小程序friction算法: delta = -1.5 * v² / a, 其中 a = -f * v / |v|
-    // 如果friction小于等于0，设置为默认值2
-    const validFriction = frictionValue <= 0 ? 2 : frictionValue;
-    const f = 1000 * validFriction;
-    const acceleration = velocity !== 0 ? -f * velocity / Math.abs(velocity) : 0;
-    const delta = acceleration !== 0 ? (-1.5 * velocity * velocity) / acceleration : 0;
-    let finalPosition = currentPosition + delta;
-    // 边界限制
-    if (finalPosition < clampRange[0]) {
-        finalPosition = clampRange[0];
-    }
-    else if (finalPosition > clampRange[1]) {
-        finalPosition = clampRange[1];
-    }
-    // 计算动画时长
-    const distance = Math.abs(finalPosition - currentPosition);
-    const duration = Math.min(1500, Math.max(200, distance * 8));
-    return withTiming(finalPosition, {
-        duration,
-        easing: Easing.out(Easing.cubic)
-    }, callback);
-};
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -129,7 +41,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -149,8 +61,6 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const yInertialMotion = useSharedValue(false);
     const isFirstTouch = useSharedValue(true);
     const touchEvent = useSharedValue('');
-    const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 });
-    const lastChangeTime = useSharedValue(0);
     const MovableAreaLayout = useContext(MovableAreaContext);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -194,21 +104,25 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
                 if (direction === 'horizontal' || direction === 'all') {
                     offsetX.value = animation
-                        ? withWechatSpring(newX, damping)
+                        ? withSpring(newX, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
                         : newX;
                 }
                 if (direction === 'vertical' || direction === 'all') {
                     offsetY.value = animation
-                        ? withWechatSpring(newY, damping)
+                        ? withSpring(newY, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
                         : newY;
                 }
-                if (bindchange) {
-                    runOnJS(runOnJSCallback)('handleTriggerChange', {
-                        x: newX,
-                        y: newY,
-                        type: 'setData'
-                    });
-                }
+                runOnJS(handleTriggerChange)({
+                    x: newX,
+                    y: newY,
+                    type: 'setData'
+                });
             }
         })();
     }, [x, y]);
@@ -218,6 +132,16 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             resetBoundaryAndCheck({ width, height });
         }
     }, [MovableAreaLayout.height, MovableAreaLayout.width]);
+    useAnimatedReaction(() => ({
+        offsetX: offsetX.value,
+        offsetY: offsetY.value
+    }), (currentValue) => {
+        const { offsetX, offsetY } = currentValue;
+        runOnJS(handleTriggerChange)({
+            x: offsetX,
+            y: offsetY
+        });
+    });
     const getTouchSource = useCallback((offsetX, offsetY) => {
         const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
             offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
@@ -306,14 +230,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             setHeight(height || 0);
         }
         nodeRef.current?.measure((x, y, width, height) => {
-            const { top: navigationY = 0 } = navigation?.layout || {};
+            const { y: navigationY = 0 } = navigation?.layout || {};
             layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
             resetBoundaryAndCheck({ width, height });
         });
         props.onLayout && props.onLayout(e);
     };
     const extendEvent = useCallback((e, type) => {
-        const { top: navigationY = 0 } = navigation?.layout || {};
+        const { y: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
@@ -335,13 +259,11 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
     }, []);
     const triggerStartOnJS = ({ e }) => {
-        const { bindtouchstart, catchtouchstart } = propsRef.current;
         extendEvent(e, 'start');
         bindtouchstart && bindtouchstart(e);
         catchtouchstart && catchtouchstart(e);
     };
     const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
-        const { bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove } = propsRef.current;
         extendEvent(e, 'move');
         if (hasTouchmove) {
             if (touchEvent === 'htouchmove') {
@@ -363,34 +285,17 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
-        const { bindtouchend, catchtouchend } = propsRef.current;
         extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };
-    const runOnJSCallbackRef = useRef({
-        handleTriggerChange,
-        triggerStartOnJS,
-        triggerMoveOnJS,
-        triggerEndOnJS
-    });
-    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
-    // 节流版本的change事件触发
-    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
-        'worklet';
-        const now = Date.now();
-        if (now - lastChangeTime.value >= changeThrottleTime) {
-            lastChangeTime.value = now;
-            runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type });
-        }
-    }, [changeThrottleTime]);
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';
             const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
             const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
             if (hasTouchmove || hasCatchTouchmove) {
-                runOnJS(runOnJSCallback)('triggerMoveOnJS', {
+                runOnJS(triggerMoveOnJS)({
                     e,
                     touchEvent: touchEvent.value,
                     hasTouchmove,
@@ -408,15 +313,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 y: changedTouches.y
             };
             if (bindtouchstart || catchtouchstart) {
-                runOnJS(runOnJSCallback)('triggerStartOnJS', { e });
+                runOnJS(triggerStartOnJS)({ e });
             }
-        })
-            .onStart(() => {
-            'worklet';
-            initialViewPosition.value = {
-                x: offsetX.value,
-                y: offsetY.value
-            };
         })
             .onTouchesMove((e) => {
             'worklet';
@@ -427,111 +325,87 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 isFirstTouch.value = false;
             }
             handleTriggerMove(e);
-        })
-            .onUpdate((e) => {
-            'worklet';
             if (disabled)
                 return;
+            const changeX = changedTouches.x - startPosition.value.x;
+            const changeY = changedTouches.y - startPosition.value.y;
             if (direction === 'horizontal' || direction === 'all') {
-                const newX = initialViewPosition.value.x + e.translationX;
+                const newX = offsetX.value + changeX;
                 if (!outOfBounds) {
                     const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value });
                     offsetX.value = x;
                 }
                 else {
-                    offsetX.value = applyBoundaryDecline(newX, draggableXRange.value);
+                    offsetX.value = newX;
                 }
             }
             if (direction === 'vertical' || direction === 'all') {
-                const newY = initialViewPosition.value.y + e.translationY;
+                const newY = offsetY.value + changeY;
                 if (!outOfBounds) {
                     const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY });
                     offsetY.value = y;
                 }
                 else {
-                    offsetY.value = applyBoundaryDecline(newY, draggableYRange.value);
+                    offsetY.value = newY;
                 }
             }
-            if (bindchange) {
-                // 使用节流版本减少 runOnJS 调用
-                handleTriggerChangeThrottled({
-                    x: offsetX.value,
-                    y: offsetY.value
-                });
-            }
         })
             .onTouchesUp((e) => {
             'worklet';
             isFirstTouch.value = true;
             isMoving.value = false;
             if (bindtouchend || catchtouchend) {
-                runOnJS(runOnJSCallback)('triggerEndOnJS', { e });
+                runOnJS(triggerEndOnJS)({ e });
             }
-        })
-            .onEnd((e) => {
-            'worklet';
-            isMoving.value = false;
             if (disabled)
                 return;
-            // 处理没有惯性且超出边界的回弹
-            if (!inertia && outOfBounds) {
+            if (!inertia) {
                 const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value });
-                if (x !== offsetX.value || y !== offsetY.value) {
-                    if (x !== offsetX.value) {
-                        offsetX.value = animation
-                            ? withWechatSpring(x, damping)
-                            : x;
-                    }
-                    if (y !== offsetY.value) {
-                        offsetY.value = animation
-                            ? withWechatSpring(y, damping)
-                            : y;
-                    }
-                    if (bindchange) {
-                        runOnJS(runOnJSCallback)('handleTriggerChange', {
-                            x,
-                            y
-                        });
-                    }
-                }
-            }
-            else if (inertia) {
-                // 惯性处理 - 使用微信小程序friction算法
-                if (direction === 'horizontal' || direction === 'all') {
-                    xInertialMotion.value = true;
-                    offsetX.value = withWechatDecay(e.velocityX / 10, offsetX.value, draggableXRange.value, friction, () => {
-                        xInertialMotion.value = false;
-                        if (bindchange) {
-                            runOnJS(runOnJSCallback)('handleTriggerChange', {
-                                x: offsetX.value,
-                                y: offsetY.value
-                            });
-                        }
-                    });
+                if (x !== offsetX.value) {
+                    offsetX.value = animation
+                        ? withSpring(x, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : x;
                 }
-                if (direction === 'vertical' || direction === 'all') {
-                    yInertialMotion.value = true;
-                    offsetY.value = withWechatDecay(e.velocityY / 10, offsetY.value, draggableYRange.value, friction, () => {
-                        yInertialMotion.value = false;
-                        if (bindchange) {
-                            runOnJS(runOnJSCallback)('handleTriggerChange', {
-                                x: offsetX.value,
-                                y: offsetY.value
-                            });
-                        }
-                    });
+                if (y !== offsetY.value) {
+                    offsetY.value = animation
+                        ? withSpring(y, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : y;
                 }
             }
         })
-            .withRef(movableGestureRef);
-        if (!disableEventPassthrough) {
-            if (direction === 'horizontal') {
-                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+            .onFinalize((e) => {
+            'worklet';
+            isMoving.value = false;
+            if (!inertia || disabled || !animation)
+                return;
+            if (direction === 'horizontal' || direction === 'all') {
+                xInertialMotion.value = true;
+                offsetX.value = withDecay({
+                    velocity: e.velocityX / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableXRange.value
+                }, () => {
+                    xInertialMotion.value = false;
+                });
             }
-            else if (direction === 'vertical') {
-                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+            if (direction === 'vertical' || direction === 'all') {
+                yInertialMotion.value = true;
+                offsetY.value = withDecay({
+                    velocity: e.velocityY / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableYRange.value
+                }, () => {
+                    yInertialMotion.value = false;
+                });
             }
-        }
+        })
+            .withRef(movableGestureRef);
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
         }

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useContext, useEffect, createElement } from 'react';
+import React, { forwardRef, useRef, useContext, useEffect } 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, useLayout } from '../utils';
+import { extendObject } from '../utils';
 import { createPopupManager } from '../mpx-popup';
 /**
  * ✔ mode
@@ -109,18 +109,17 @@ 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 { layoutRef, layoutProps } = useLayout({
-        props,
-        hasSelfPercent: false,
-        nodeRef
-    });
     const innerProps = useInnerProps(extendObject({}, props, {
         ref: nodeRef
-    }, layoutProps), [], { layoutRef });
+    }), [], { layoutRef: innerLayout });
+    const getInnerLayout = (layout) => {
+        innerLayout.current = layout.current;
+    };
     useEffect(() => {
         if (range && pickerRef.current && mode === "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
             pickerRef.current.updateRange?.(range);
@@ -163,7 +162,7 @@ const Picker = forwardRef((props, ref) => {
         if (mode !== "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
             return;
         }
-        const eventData = getCustomEvent('columnchange', {}, { detail: { column: columnIndex, value }, layoutRef });
+        const eventData = getCustomEvent('columnchange', {}, { detail: { column: columnIndex, value }, layoutRef: innerLayout });
         props.bindcolumnchange?.(eventData);
     };
     const onCancel = () => {
@@ -171,7 +170,7 @@ const Picker = forwardRef((props, ref) => {
         hide();
     };
     const onConfirm = () => {
-        const eventData = getCustomEvent('change', {}, { detail: { value: pickerValue.current }, layoutRef });
+        const eventData = getCustomEvent('change', {}, { detail: { value: pickerValue.current }, layoutRef: innerLayout });
         bindchange?.(eventData);
         hide();
     };
@@ -180,6 +179,7 @@ const Picker = forwardRef((props, ref) => {
         children,
         bindchange: onChange,
         bindcolumnchange: onColumnChange,
+        getInnerLayout,
         getRange: () => range
     });
     const renderPickerContent = () => {
@@ -215,7 +215,9 @@ const Picker = forwardRef((props, ref) => {
             remove();
         };
     }, []);
-    return createElement(TouchableWithoutFeedback, { onPress: show }, createElement(View, innerProps, children));
+    return (<TouchableWithoutFeedback onPress={show}>
+        {children}
+      </TouchableWithoutFeedback>);
 });
 Picker.displayName = 'MpxPicker';
 export default Picker;

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

@@ -1,10 +1,9 @@
 import { View } from 'react-native';
-import React, { createElement, forwardRef, useRef } from 'react';
+import React, { 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',
@@ -24,7 +23,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, hasPositionFixed } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
@@ -115,11 +114,11 @@ const _PickerView = forwardRef((props, ref) => {
         onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    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;
+    return (<PickerViewStyleContext.Provider value={textStyle}>
+      <View {...innerProps}>
+        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+      </View>
+    </PickerViewStyleContext.Provider>);
 });
 _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, createElement } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from '../utils';
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
@@ -157,8 +157,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
     const onScroll = useCallback((e) => {
         // 全局注册的振动触感 hook
-        const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate;
-        if (typeof onPickerVibrate !== 'function') {
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
             return;
         }
         const { y } = e.nativeEvent.contentOffset;
@@ -172,7 +172,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                         y: currentId * itemRawH
                     };
                     // vibrateShort({ type: 'selection' })
-                    onPickerVibrate();
+                    pickerVibrate();
                 }
             }
         }
@@ -220,28 +220,11 @@ 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 = () => {
-        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()));
+        return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} onTouchEnd={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 renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
@@ -252,8 +235,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     </View>);
 });
 const styles = StyleSheet.create({
-    wrapper: { display: 'flex', flex: 1 },
-    scrollView: { width: '100%' }
+    wrapper: { display: 'flex', flex: 1 }
 });
 _PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -1,4 +1,5 @@
-import { useState, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
 const _PortalManager = forwardRef((props, ref) => {
     const [state, setState] = useState({
         portals: []
@@ -30,9 +31,10 @@ const _PortalManager = forwardRef((props, ref) => {
         portals: state.portals
     }));
     return (<>
-      {state.portals.map(({ key, children }) => (<Fragment key={key}>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
           {children}
-        </Fragment>))}
+        </View>))}
     </>);
 });
 export default _PortalManager;

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

@@ -8,7 +8,6 @@ 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({});
@@ -24,7 +23,7 @@ const radioGroup = forwardRef((props, ref) => {
         flexWrap: 'wrap'
     };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { 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 });
@@ -78,16 +77,10 @@ const radioGroup = forwardRef((props, ref) => {
     }), ['name'], {
         layoutRef
     });
-    const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
-        value: contextValue
-    }, wrapChildren(props, {
+    return 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;