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

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

@@ -1,12 +1,11 @@
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
-import React, { forwardRef, useRef, useEffect, useMemo, createElement } from 'react';
+import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture, useRunOnJSCallback } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { SwiperContext } from './context';
-import Portal from './mpx-portal';
 /**
  * 默认的Style类型
  */
@@ -71,19 +70,16 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
+    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
     // 手势协同gesture 1.0
     const swiperGestureRef = useRef();
-    useNodesRef(props, ref, nodeRef, {
-        // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
-        gestureRef: swiperGestureRef
-    });
+    useNodesRef(props, ref, nodeRef, {});
     // 计算transfrom之类的
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -112,18 +108,23 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
-    const currentIndex = useSharedValue(propCurrent);
+    const currentIndex = useSharedValue(props.current || 0);
     // const initOffset = getOffset(props.current || 0, initStep)
     // 记录元素的偏移量
-    const offset = useSharedValue(getOffset(propCurrent, initStep));
+    const offset = useSharedValue(getOffset(props.current || 0, initStep));
     const strAbso = 'absolute' + dir.toUpperCase();
-    const strVelocity = 'velocity' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
     const touchfinish = useSharedValue(true);
     // 记录上一帧的绝对定位坐标
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
     const moveTranstion = useSharedValue(0);
+    // 记录从onBegin 到 onTouchesUp 的时间
+    const moveTime = useSharedValue(0);
+    // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
+    const anotherDirectionMove = useSharedValue(0);
+    // 另一个方向的
+    const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase();
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
@@ -170,7 +171,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const iStep = dir === 'x' ? realWidth : realHeight;
         if (iStep !== step.value) {
             step.value = iStep;
-            updateCurrent(propCurrent, iStep);
+            updateCurrent(props.current || 0, iStep);
             updateAutoplay();
         }
     }
@@ -186,6 +187,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderPagination() {
+        if (children.length <= 1)
+            return null;
         const activeColor = activeDotColor || '#007aff';
         const unActionColor = dotColor || 'rgba(0,0,0,.2)';
         // 正常渲染所有dots
@@ -272,7 +275,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     easing: easeMap[easeingFunc]
                 }, () => {
                     currentIndex.value = nextIndex;
-                    runOnJS(runOnJSCallback)('loop');
+                    runOnJS(loop)();
                 });
             }
             else {
@@ -288,7 +291,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         // 将开始位置设置为真正的位置
                         offset.value = initOffset;
                         currentIndex.value = nextIndex;
-                        runOnJS(runOnJSCallback)('loop');
+                        runOnJS(loop)();
                     });
                 }
                 else {
@@ -300,7 +303,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         easing: easeMap[easeingFunc]
                     }, () => {
                         currentIndex.value = nextIndex;
-                        runOnJS(runOnJSCallback)('loop');
+                        runOnJS(loop)();
                     });
                 }
             }
@@ -325,19 +328,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
+    function handleSwiperChange(current) {
+        if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
+            props.bindchange && props.bindchange(eventData);
         }
     }
-    const runOnJSCallbackRef = useRef({
-        loop,
-        pauseLoop,
-        resumeLoop,
-        handleSwiperChange
-    });
-    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     function getOffset(index, stepValue) {
         if (!stepValue)
             return 0;
@@ -355,12 +351,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const targetOffset = getOffset(index || 0, stepValue);
         if (targetOffset !== offset.value) {
             // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
-            if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
+            if (props.current !== undefined && props.current !== currentIndex.value) {
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
                 }, () => {
-                    currentIndex.value = propCurrent;
+                    currentIndex.value = props.current || 0;
                 });
             }
             else {
@@ -379,8 +375,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
-            runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
+        if (newIndex !== preIndex && props.bindchange) {
+            runOnJS(handleSwiperChange)(newIndex);
         }
     });
     useEffect(() => {
@@ -412,11 +408,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }, [children.length]);
     useEffect(() => {
         // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
-        // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-        if (propCurrent !== currentIndex.value) {
-            updateCurrent(propCurrent, step.value);
+        // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
+        if (props.current !== currentIndex.value) {
+            updateCurrent(props.current || 0, step.value);
         }
-    }, [propCurrent]);
+    }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
         updateAutoplay();
@@ -437,7 +433,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         function getTargetPosition(eventData) {
             'worklet';
             // 移动的距离
-            const { transdir } = eventData;
+            const { translation } = eventData;
             let resetOffsetPos = 0;
             let selectedIndex = currentIndex.value;
             // 是否临界点
@@ -445,9 +441,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 真实滚动到的偏移量坐标
             let moveToTargetPos = 0;
             const tmp = !circularShared.value ? 0 : preMarginShared.value;
-            const currentOffset = transdir < 0 ? offset.value - tmp : offset.value + tmp;
+            const currentOffset = translation < 0 ? offset.value - tmp : offset.value + tmp;
             const computedIndex = Math.abs(currentOffset) / step.value;
-            const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
+            const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
                 selectedIndex = moveToIndex;
@@ -478,24 +474,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 targetOffset: -moveToTargetPos
             };
         }
-        function canMove(eventData) {
+        function checkUnCircular(eventData) {
             'worklet';
-            // 旧版：如果在快速多次滑动时，只根据当前的offset判断，会出现offset没超出，加上translation后越界的场景(如在倒数第二个元素快速滑动)
-            // 新版：会加上translation
-            const { translation, transdir } = eventData;
-            const gestureMovePos = offset.value + translation;
-            if (!circularShared.value) {
-                // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-                const posEnd = -step.value * (childrenLength.value - 1);
-                if (transdir < 0) {
-                    return gestureMovePos > posEnd;
-                }
-                else {
-                    return gestureMovePos < 0;
-                }
+            const { translation } = eventData;
+            const currentOffset = Math.abs(offset.value);
+            // 向右滑动swiper
+            if (translation < 0) {
+                const boundaryOffset = step.value * (childrenLength.value - 1);
+                const gestureMovePos = Math.abs(translation) + currentOffset;
+                return {
+                    // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
+                    targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
+                    canMove: currentOffset < boundaryOffset
+                };
             }
             else {
-                return true;
+                const gestureMovePos = currentOffset - translation;
+                return {
+                    targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
+                    canMove: currentOffset > 0
+                };
             }
         }
         function handleEnd(eventData) {
@@ -509,7 +507,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     if (touchfinish.value !== false) {
                         currentIndex.value = selectedIndex;
                         offset.value = resetOffset;
-                        runOnJS(runOnJSCallback)('resumeLoop');
+                        runOnJS(resumeLoop)();
                     }
                 });
             }
@@ -520,21 +518,21 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }, () => {
                     if (touchfinish.value !== false) {
                         currentIndex.value = selectedIndex;
-                        runOnJS(runOnJSCallback)('resumeLoop');
+                        runOnJS(resumeLoop)();
                     }
                 });
             }
         }
         function handleBack(eventData) {
             'worklet';
-            const { transdir } = eventData;
+            const { translation } = eventData;
             // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
             let currentOffset = Math.abs(offset.value);
             if (circularShared.value) {
-                currentOffset += transdir < 0 ? preMarginShared.value : -preMarginShared.value;
+                currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value;
             }
             const curIndex = currentOffset / step.value;
-            const moveToIndex = (transdir < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
+            const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
             const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0);
             offset.value = withTiming(targetOffset, {
                 duration: easeDuration,
@@ -542,106 +540,77 @@ const SwiperWrapper = forwardRef((props, ref) => {
             }, () => {
                 if (touchfinish.value !== false) {
                     currentIndex.value = moveToIndex;
-                    runOnJS(runOnJSCallback)('resumeLoop');
+                    runOnJS(resumeLoop)();
                 }
             });
         }
-        // 当前的offset和index多对应的offset进行对比，判断是否超过一半
-        function computeHalf(eventData) {
+        function computeHalf() {
             'worklet';
-            const { transdir } = eventData;
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
             if (circularShared.value) {
                 preOffset -= preMarginShared.value;
             }
-            // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
+            // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
-            const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset);
             return {
                 diffOffset,
-                half,
-                isTriggerUpdateHalf
+                half
             };
         }
-        function handleLongPress(eventData) {
+        function handleLongPress() {
             'worklet';
-            const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
+            const { diffOffset, half } = computeHalf();
             if (+diffOffset === 0) {
-                runOnJS(runOnJSCallback)('resumeLoop');
-            }
-            else if (isTriggerUpdateHalf) {
-                // 如果触发了onUpdate时的索引变更
-                handleEnd(eventData);
+                runOnJS(resumeLoop)();
             }
             else if (half) {
-                handleEnd(eventData);
+                handleEnd({ translation: diffOffset });
             }
             else {
-                handleBack(eventData);
+                handleBack({ translation: diffOffset });
             }
         }
         function reachBoundary(eventData) {
             'worklet';
-            // 1. 基于当前的offset和translation判断是否超过当前边界值
+            // 移动的距离
             const { translation } = eventData;
-            const boundaryStart = -patchElmNumShared.value * step.value;
-            const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value;
-            const moveToOffset = offset.value + translation;
+            const elementsLength = step.value * childrenLength.value;
             let isBoundary = false;
             let resetOffset = 0;
-            if (moveToOffset < boundaryEnd) {
-                isBoundary = true;
-                // 超过边界的距离
-                const exceedLength = Math.abs(moveToOffset) - Math.abs(boundaryEnd);
-                // 计算对标正常元素所在的offset
-                resetOffset = patchElmNumShared.value * step.value + exceedLength;
+            // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
+            const currentOffset = offset.value;
+            const moveStep = Math.ceil(translation / elementsLength);
+            if (translation < 0) {
+                const posEnd = (childrenLength.value + patchElmNumShared.value + 1) * step.value;
+                const posReverseEnd = (patchElmNumShared.value - 1) * step.value;
+                if (currentOffset < -posEnd + step.value) {
+                    isBoundary = true;
+                    resetOffset = Math.abs(moveStep) === 0 ? patchElmNumShared.value * step.value + translation : moveStep * elementsLength;
+                }
+                if (currentOffset > -posReverseEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength;
+                }
             }
-            if (moveToOffset > boundaryStart) {
-                isBoundary = true;
-                // 超过边界的距离
-                const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset);
-                // 计算对标正常元素所在的offset
-                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength);
+            else if (translation > 0) {
+                const posEnd = (patchElmNumShared.value - 1) * step.value;
+                const posReverseEnd = (patchElmNumShared.value + childrenLength.value) * step.value;
+                if (currentOffset > -posEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0);
+                }
+                if (currentOffset < -posReverseEnd) {
+                    isBoundary = true;
+                    resetOffset = moveStep * elementsLength + patchElmNumShared.value * step.value;
+                }
             }
             return {
                 isBoundary,
                 resetOffset: -resetOffset
             };
         }
-        // 非循环超出边界，应用阻力; 开始滑动少阻力小，滑动越长阻力越大
-        function handleResistanceMove(eventData) {
-            'worklet';
-            const { translation, transdir } = eventData;
-            const moveToOffset = offset.value + translation;
-            const maxOverDrag = Math.floor(step.value / 2);
-            const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0;
-            let resistance = 0.1;
-            let overDrag = 0;
-            let finalOffset = 0;
-            // 向右向下小于0, 向左向上大于0；
-            if (transdir < 0) {
-                overDrag = Math.abs(moveToOffset - maxOffset);
-            }
-            else {
-                overDrag = Math.abs(moveToOffset);
-            }
-            // 滑动越多resistance越小
-            resistance = 1 - overDrag / maxOverDrag;
-            // 确保阻力在合理范围内
-            resistance = Math.min(0.5, resistance);
-            // 限制在最大拖拽范围内
-            if (transdir < 0) {
-                const adjustOffset = offset.value + translation * resistance;
-                finalOffset = Math.max(adjustOffset, maxOffset - maxOverDrag);
-            }
-            else {
-                const adjustOffset = offset.value + translation * resistance;
-                finalOffset = Math.min(adjustOffset, maxOverDrag);
-            }
-            return finalOffset;
-        }
         const gesturePan = Gesture.Pan()
             .onBegin((e) => {
             'worklet';
@@ -649,47 +618,37 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             touchfinish.value = false;
             cancelAnimation(offset);
-            runOnJS(runOnJSCallback)('pauseLoop');
+            runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
+            anotherDirectionMove.value = e[anotherAbso];
+            moveTime.value = new Date().getTime();
         })
             .onUpdate((e) => {
             'worklet';
-            const moveDistance = e[strAbso] - preAbsolutePos.value;
-            if (touchfinish.value || moveDistance === 0)
+            if (touchfinish.value)
                 return;
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
-                translation: moveDistance,
-                transdir: moveDistance
+                translation: moveDistance
             };
-            // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-            const { half } = computeHalf(eventData);
-            if (childrenLength.value > 1 && half) {
+            // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
+            const { half } = computeHalf();
+            if (half) {
                 const { selectedIndex } = getTargetPosition(eventData);
                 currentIndex.value = selectedIndex;
             }
-            // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
+            // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+            const { canMove, targetOffset } = checkUnCircular(eventData);
             if (!circularShared.value) {
-                if (canMove(eventData)) {
-                    offset.value = moveDistance + offset.value;
+                if (canMove) {
+                    offset.value = targetOffset;
+                    preAbsolutePos.value = e[strAbso];
                 }
-                else {
-                    const finalOffset = handleResistanceMove(eventData);
-                    offset.value = finalOffset;
-                }
-                preAbsolutePos.value = e[strAbso];
-                return;
-            }
-            // 3. 循环更新: 只有一个元素时可滑动，加入阻力
-            if (circularShared.value && childrenLength.value === 1) {
-                const finalOffset = handleResistanceMove(eventData);
-                offset.value = finalOffset;
-                preAbsolutePos.value = e[strAbso];
                 return;
             }
-            // 4. 循环更新：正常
             const { isBoundary, resetOffset } = reachBoundary(eventData);
-            if (childrenLength.value > 1 && isBoundary && circularShared.value) {
+            if (isBoundary && circularShared.value) {
                 offset.value = resetOffset;
             }
             else {
@@ -701,49 +660,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
             'worklet';
             if (touchfinish.value)
                 return;
+            const moveDistance = e[strAbso] - moveTranstion.value;
             touchfinish.value = true;
-            // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
-            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
-                translation: moveDistance,
-                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+                translation: moveDistance
             };
-            // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
-            if (childrenLength.value === 1) {
-                offset.value = withTiming(0, {
-                    duration: easeDuration,
-                    easing: easeMap[easeingFunc]
-                });
-                return;
-            }
-            // 2.非循环状态不可移动态：最后一个元素 和 第一个元素
-            // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
-            // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
-            if (!circularShared.value && !canMove(eventData)) {
-                if (eventData.transdir < 0) {
-                    handleBack(eventData);
-                }
-                else {
-                    handleEnd(eventData);
-                }
-                return;
-            }
-            // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
-            const velocity = e[strVelocity];
-            if (Math.abs(velocity) < longPressRatio) {
-                handleLongPress(eventData);
+            const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
+            if (Math.abs(strVelocity) < longPressRatio) {
+                handleLongPress();
             }
             else {
+                // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
                 handleEnd(eventData);
             }
-        })
-            .withRef(swiperGestureRef);
+        }).withRef(swiperGestureRef);
         // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
         if (dir === 'x') {
-            gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5]);
+            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
         }
         else {
-            gesturePan.activeOffsetY([-2, 2]).failOffsetX([-5, 5]);
+            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
         }
         // 手势协同2.0
         if (simultaneousHandlers && simultaneousHandlers.length) {
@@ -764,32 +700,34 @@ const SwiperWrapper = forwardRef((props, ref) => {
             return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 };
         }
     });
-    let finalComponent;
-    const arrPages = renderItems();
-    const mergeProps = Object.assign({
-        style: [normalStyle, layoutStyle, styles.swiper]
-    }, layoutProps, innerProps);
-    const animateComponent = createElement(Animated.View, {
-        style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
-    }, wrapChildren({
-        children: arrPages
-    }, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-    }));
-    const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent;
-    finalComponent = createElement(View, mergeProps, renderChildrens);
-    if (!disableGesture) {
-        finalComponent = createElement(GestureDetector, {
-            gesture: gestureHandler
-        }, finalComponent);
+    function renderSwiper() {
+        const arrPages = renderItems();
+        return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
+      <Animated.View style={[{
+                    flexDirection: dir === 'x' ? 'row' : 'column',
+                    width: '100%',
+                    height: '100%'
+                }, animatedStyles]}>
+        {wrapChildren({
+                children: arrPages
+            }, {
+                hasVarDec,
+                varContext: varContextRef.current,
+                textStyle,
+                textProps
+            })}
+      </Animated.View>
+      {showsPagination && renderPagination()}
+    </View>);
+    }
+    if (children.length === 1 || disableGesture) {
+        return renderSwiper();
     }
-    if (hasPositionFixed) {
-        finalComponent = createElement(Portal, null, finalComponent);
+    else {
+        return (<GestureDetector gesture={gestureHandler}>
+      {renderSwiper()}
+    </GestureDetector>);
     }
-    return finalComponent;
 });
 SwiperWrapper.displayName = 'MpxSwiperWrapper';
 export default SwiperWrapper;

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

@@ -10,7 +10,6 @@ import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import CheckBox from './mpx-checkbox';
-import Portal from './mpx-portal';
 import { FormContext } from './context';
 import { useTransformStyle, useLayout, extendObject } from './utils';
 const _Switch = forwardRef((props, ref) => {
@@ -22,7 +21,7 @@ const _Switch = forwardRef((props, ref) => {
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -84,17 +83,13 @@ const _Switch = forwardRef((props, ref) => {
             checked: isChecked
         }));
     }
-    let finalComponent = createElement(Switch, extendObject({}, innerProps, {
+    return createElement(Switch, extendObject({}, innerProps, {
         style: normalStyle,
         value: isChecked,
         trackColor: { false: '#FFF', true: color },
         thumbColor: isChecked ? '#FFF' : '#f4f3f4',
         ios_backgroundColor: '#FFF'
     }));
-    if (hasPositionFixed) {
-        finalComponent = createElement(Portal, null, finalComponent);
-    }
-    return finalComponent;
 });
 _Switch.displayName = 'MpxSwitch';
 export default _Switch;

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

@@ -5,13 +5,12 @@
  */
 import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
-import Portal from './mpx-portal';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils';
 const _Text = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -30,14 +29,10 @@ const _Text = forwardRef((props, ref) => {
     }), [
         'user-select'
     ]);
-    let finalComponent = createElement(Text, innerProps, wrapChildren(props, {
+    return createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     }));
-    if (hasPositionFixed) {
-        finalComponent = createElement(Portal, null, finalComponent);
-    }
-    return finalComponent;
 });
 _Text.displayName = 'MpxText';
 export default _Text;