@mpxjs/webpack-plugin 2.9.65 → 2.9.67

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

@@ -31,5 +31,5 @@ const _Navigator = forwardRef((props, ref) => {
       {children}
     </MpxView>);
 });
-_Navigator.displayName = 'mpx-navigator';
+_Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

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

@@ -1,7 +1,7 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
@@ -9,7 +9,9 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const radioGroup = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange } = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const propsRef = useRef({});
+    propsRef.current = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -28,16 +30,13 @@ const radioGroup = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const getSelectionValue = () => {
+    const getValue = () => {
         for (const key in groupValue) {
             if (groupValue[key].checked) {
                 return key;
             }
         }
     };
-    const getValue = () => {
-        return getSelectionValue();
-    };
     const resetValue = () => {
         Object.keys(groupValue).forEach((key) => {
             groupValue[key].checked = false;
@@ -52,15 +51,29 @@ const radioGroup = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const notifyChange = (evt) => {
-        bindchange &&
-            bindchange(getCustomEvent('tap', evt, {
-                layoutRef,
-                detail: {
-                    value: getSelectionValue()
-                }
-            }, props));
-    };
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -69,7 +82,7 @@ const radioGroup = forwardRef((props, ref) => {
         layoutRef
     });
     return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+      <RadioGroupContext.Provider value={contextValue}>
         {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current
@@ -77,5 +90,5 @@ const radioGroup = forwardRef((props, ref) => {
       </RadioGroupContext.Provider>
     </View>);
 });
-radioGroup.displayName = 'mpx-radio-group';
+radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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

@@ -151,5 +151,5 @@ const Radio = forwardRef((radioProps, ref) => {
         })}
       </View>);
 });
-Radio.displayName = 'mpx-radio';
+Radio.displayName = 'MpxRadio';
 export default Radio;

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

@@ -11,5 +11,5 @@ const _RootPortal = (props) => {
     </Portal>
         : <>{children}</>;
 };
-_RootPortal.displayName = 'mpx-root-portal';
+_RootPortal.displayName = 'MpxRootPortal';
 export default _RootPortal;

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

@@ -5,7 +5,7 @@
  * ✔ lower-threshold
  * ✔ scroll-top
  * ✔ scroll-left
- * ✘ scroll-into-view
+ * ✔ scroll-into-view
  * ✔ scroll-with-animation
  * ✔ enable-back-to-top
  * ✘ enable-passive
@@ -33,15 +33,18 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture } from './utils';
+import { IntersectionObserverContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, '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, __selectRef } = props;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
@@ -56,6 +59,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
+    const intersectionObservers = useContext(IntersectionObserverContext);
+    const snapScrollIntoView = useRef('');
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
@@ -69,30 +74,42 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             fastDeceleration: false,
             decelerationDisabled: false,
             scrollTo: scrollToOffset
-        }
+        },
+        gestureRef: scrollViewRef
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
     }
     useEffect(() => {
-        if (snapScrollTop.current !== props['scroll-top'] ||
-            snapScrollLeft.current !== props['scroll-left']) {
-            snapScrollTop.current = props['scroll-top'] || 0;
-            snapScrollLeft.current = props['scroll-left'] || 0;
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
             initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+                scrollToOffset(scrollLeft, scrollTop);
             }, 0);
             return () => {
                 initialTimeout.current && clearTimeout(initialTimeout.current);
             };
         }
-    }, [props['scroll-top'], props['scroll-left']]);
+    }, [scrollTop, scrollLeft]);
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
     useEffect(() => {
-        if (refreshing !== props['refresher-triggered']) {
-            setRefreshing(!!props['refresher-triggered']);
+        if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
+            snapScrollIntoView.current = scrollIntoView || '';
+            setTimeout(() => {
+                const refs = __selectRef(`#${scrollIntoView}`, 'node');
+                if (refs) {
+                    const { nodeRef } = refs.getNodeInstance();
+                    nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+                        scrollToOffset(left, top);
+                    });
+                }
+            });
         }
-    }, [props['refresher-triggered']]);
+    }, [scrollIntoView]);
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -173,6 +190,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -197,6 +219,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
         }
     }
     function onRefresh() {
@@ -205,7 +229,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
     }
     function onScrollTouchStart(e) {
-        const { binddragstart, bindtouchstart, enhanced } = props;
+        const { bindtouchstart } = props;
         bindtouchstart && bindtouchstart(e);
         if (enhanced) {
             binddragstart &&
@@ -219,7 +243,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onScrollTouchMove(e) {
-        const { binddragging, bindtouchmove, enhanced } = props;
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
             binddragging &&
@@ -232,24 +255,23 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollEndDrag(e) {
-        const { binddragend, enhanced } = props;
+    function onScrollTouchEnd(e) {
+        bindtouchend && bindtouchend(e);
         if (enhanced) {
-            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollLeft,
-                        scrollTop: scrollTop,
-                        scrollHeight,
-                        scrollWidth
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
-            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
+    function onScrollDrag(e) {
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
     let scrollAdditionalProps = {
         style: { ...innerStyle, ...layoutStyle },
         pinchGestureEnabled: false,
@@ -262,11 +284,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: onScrollTouchStart,
-        bindtouchmove: onScrollTouchMove,
-        onScrollEndDrag,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+        onScrollBeginDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDrag,
         onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps
+        ...layoutProps,
+        ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
+        ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
     };
     if (enhanced) {
         scrollAdditionalProps = {
@@ -276,9 +302,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         };
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'id',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
+        'enable-trigger-intersection-observer',
         'paging-enabled',
         'show-scrollbar',
         'upper-threshold',
@@ -315,5 +343,5 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         })}
     </ScrollView>);
 });
-_ScrollView.displayName = 'mpx-scroll-view';
+_ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -67,6 +67,8 @@ const _Carouse = forwardRef((props, ref) => {
     const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
     const defaultX = (defaultWidth * initOffsetIndex) || 0;
     const defaultY = (defaultHeight * initOffsetIndex) || 0;
+    // 主动scorllTo时是否要出发onScrollEnd
+    const needTriggerScrollEnd = useRef(true);
     // 内部存储上一次的offset值
     const autoplayTimerRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -77,22 +79,21 @@ const _Carouse = forwardRef((props, ref) => {
     // 内部存储上一次的偏移量
     const internalsRef = useRef({
         offset: {
-            x: defaultX || 0,
-            y: defaultY || 0
+            x: 0,
+            y: 0
         },
         isScrolling: false
     });
     const isDragRef = useRef(false);
     const [state, setState] = useState({
-        children: newChild,
         width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
         height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
         // 真正的游标索引, 从0开始
         index: initIndex,
         total: totalElements,
         offset: {
-            x: dir === 'x' ? defaultX : 0,
-            y: dir === 'y' ? defaultY : 0
+            x: 0,
+            y: 0
         },
         dir
     });
@@ -113,25 +114,38 @@ const _Carouse = forwardRef((props, ref) => {
     }, [props.autoplay, props.current, state.index, state.width, state.height]);
     useEffect(() => {
         // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-        if (!props.autoplay && props.current !== state.index) {
+        if (!props.autoplay && props.current !== undefined && props.current !== state.index) {
             const initIndex = props.current || 0;
             // 这里要排除超过元素个数的设置
-            const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
-            const defaultX = (defaultWidth * initOffsetIndex) || 0;
-            const offset = {
-                x: dir === 'x' ? defaultX : 0,
-                y: dir === 'y' ? defaultY : 0
-            };
-            state.offset = offset;
-            internalsRef.current.offset = offset;
-            setState((preState) => {
-                return {
-                    ...preState,
-                    offset
-                };
-            });
+            const { nextIndex, nextOffset } = getMultiNextConfig(props.current);
+            // 1. 安卓需要主动更新下内部状态, 2. IOS不能触发完wcrollTo之后立即updateState, 会造成滑动两次
+            // 2. setTimeout 是fix 当再渲染过程中触发scrollTo失败的问题
+            if (Platform.OS === 'ios') {
+                needTriggerScrollEnd.current = false;
+                setTimeout(() => {
+                    scrollViewRef.current?.scrollTo({
+                        ...nextOffset,
+                        animated: true
+                    });
+                }, 50);
+            }
+            else {
+                updateState(nextIndex, nextOffset);
+            }
         }
-    }, [props.current]);
+    }, [props.current, state.width, state.height]);
+    function getMultiNextConfig(target) {
+        const step = state.dir === 'x' ? state.width : state.height;
+        const targetPos = step * props.current;
+        const targetOffset = {
+            x: dir === 'x' ? targetPos : 0,
+            y: dir === 'y' ? targetPos : 0
+        };
+        return {
+            nextIndex: target,
+            nextOffset: targetOffset
+        };
+    }
     /**
      * @desc: 更新状态: index和offset, 并响应索引变化的事件
      * scrollViewOffset: 移动到的目标位置
@@ -181,7 +195,6 @@ const _Carouse = forwardRef((props, ref) => {
             nextIndex = isBack ? nextIndex - 2 : nextIndex;
         }
         if (!props.circular) {
-            // nextIndex = isBack ? nextIndex - 2 : nextIndex
             nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex });
         }
         else {
@@ -230,13 +243,12 @@ const _Carouse = forwardRef((props, ref) => {
             createAutoPlay();
             return;
         }
-        if (!Array.isArray(state.children)) {
+        if (!Array.isArray(props.children)) {
             return;
         }
         const step = state.dir === 'x' ? state.width : state.height;
         const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset);
         // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
-        // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
         if (Platform.OS === 'ios') {
             if (!isAutoEnd) {
                 scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true });
@@ -266,7 +278,6 @@ const _Carouse = forwardRef((props, ref) => {
                 // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
                 if (state.dir === 'x') {
                     scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true });
-                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
                 }
                 else {
                     scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true });
@@ -283,9 +294,15 @@ const _Carouse = forwardRef((props, ref) => {
     }
     /**
      * 当用户开始拖动结束
+     * 注意: 当手动调用scrollTo的时候, 安卓不会触发onMomentumScrollEnd, IOS会触发onMomentumScrollEnd
      */
     function onScrollEnd(event) {
-        // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+        if (Platform.OS === 'ios' && !needTriggerScrollEnd.current) {
+            const { nextIndex, nextOffset } = getMultiNextConfig(props.current);
+            updateState(nextIndex, nextOffset);
+            needTriggerScrollEnd.current = true;
+            return;
+        }
         if (totalElements === 1) {
             return;
         }
@@ -311,58 +328,41 @@ const _Carouse = forwardRef((props, ref) => {
      * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
     */
     function onWrapperLayout(e) {
-        if (hasSelfPercent) {
-            const { width, height } = e?.nativeEvent?.layout || {};
-            setWidth(width || 0);
-            setHeight(height || 0);
-        }
-        if (props.enableOffset) {
-            scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-                const isWDiff = state.width !== width;
-                const isHDiff = state.height !== height;
-                if (isWDiff || isHDiff) {
-                    const changeState = {
-                        width: isWDiff ? width : state.width,
-                        height: isHDiff ? height : state.height
+        scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            const isWDiff = state.width !== width;
+            const isHDiff = state.height !== height;
+            if (isWDiff || isHDiff) {
+                const changeState = {
+                    width: isWDiff ? width : state.width,
+                    height: isHDiff ? height : state.height
+                };
+                const attr = state.dir === 'x' ? 'width' : 'height';
+                changeState[attr] = changeState[attr] - previousMargin - nextMargin;
+                const correctOffset = Object.assign({}, state.offset, {
+                    [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+                });
+                state.width = changeState.width;
+                state.height = changeState.height;
+                // 这里setState之后,会再触发重新渲染, renderScrollView会再次触发onScrollEnd,
+                setState((preState) => {
+                    return {
+                        ...preState,
+                        width: changeState.width,
+                        height: changeState.height
                     };
-                    const attr = state.dir === 'x' ? 'width' : 'height';
-                    changeState[attr] = changeState[attr] - previousMargin - nextMargin;
-                    const correctOffset = Object.assign({}, state.offset, {
-                        [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
-                    });
-                    state.offset = correctOffset;
-                    state.width = changeState.width;
-                    state.height = changeState.height;
-                    setState((preState) => {
-                        return {
-                            ...preState,
-                            offset: correctOffset,
-                            width: changeState.width,
-                            height: changeState.height
-                        };
-                    });
-                    scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false });
-                }
-                props.getInnerLayout && props.getInnerLayout(layoutRef);
-            });
-        }
+                });
+            }
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
     }
     function getOffset() {
         const step = state.dir === 'x' ? state.width : state.height;
         if (!step || Number.isNaN(+step))
             return [];
         const offsetArray = [];
-        if (previousMargin) {
-            offsetArray.push(0);
-            for (let i = 1; i < totalElements; i++) {
-                offsetArray.push(i * step - previousMargin);
-            }
-        }
-        else {
-            for (let i = 0; i < totalElements; i++) {
-                offsetArray.push(i * step);
-            }
+        for (let i = 0; i < totalElements; i++) {
+            offsetArray.push(i * step);
         }
         return offsetArray;
     }
@@ -371,7 +371,7 @@ const _Carouse = forwardRef((props, ref) => {
         const scrollElementProps = {
             ref: scrollViewRef,
             horizontal: props.horizontal,
-            pagingEnabled: false,
+            pagingEnabled: true,
             snapToOffsets: offsetsArray,
             decelerationRate: 0.99,
             showsHorizontalScrollIndicator: false,
@@ -423,20 +423,21 @@ const _Carouse = forwardRef((props, ref) => {
       </View>);
     }
     function renderPages() {
-        const { width, height, total, children } = state;
+        const { width, height } = state;
+        const { children } = props;
         const { circular } = props;
         const pageStyle = { width: width, height: height };
         // 设置了previousMargin或者nextMargin,
         // 1. 元素的宽度是减去这两个数目之和
         // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
         // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
-        if (total > 1 && Array.isArray(children)) {
+        if (totalElements > 1 && Array.isArray(children)) {
             let arrElements = [];
             // pages = ["2", "0", "1", "2", "0"]
             const pages = Array.isArray(children) ? Object.keys(children) : [];
             /* 无限循环的时候 */
             if (circular) {
-                pages.unshift(total - 1 + '');
+                pages.unshift(totalElements - 1 + '');
                 pages.push('0');
             }
             arrElements = pages.map((page, i) => {
@@ -447,7 +448,6 @@ const _Carouse = forwardRef((props, ref) => {
                 else if (i === pages.length - 1 && typeof width === 'number') {
                     nextMargin && (extraStyle.marginRight = nextMargin);
                 }
-                // return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>{children[+page]}</View>)
                 return (<View style={[pageStyle, styles.slide, extraStyle]} key={'page' + i}>
           {wrapChildren({
                         children: children[+page]
@@ -474,5 +474,5 @@ const _Carouse = forwardRef((props, ref) => {
       {props.showsPagination && renderPagination()}
   </View>);
 });
-_Carouse.displayName = '_Carouse';
+_Carouse.displayName = 'MpxCarouse';
 export default _Carouse;

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

@@ -64,5 +64,5 @@ const _SwiperWrapper = forwardRef((props, ref) => {
     {children}
   </Carouse>;
 });
-_SwiperWrapper.displayName = 'mpx-swiper';
+_SwiperWrapper.displayName = 'MpxSwiper';
 export default _SwiperWrapper;

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

@@ -30,5 +30,5 @@ const _SwiperItem = forwardRef((props, ref) => {
         })}
     </View>);
 });
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;

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

@@ -58,6 +58,13 @@ const _Switch = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -76,5 +83,5 @@ const _Switch = forwardRef((props, ref) => {
     }
     return <Switch {...innerProps} style={normalStyle} value={isChecked} trackColor={{ false: '#FFF', true: color }} thumbColor={isChecked ? '#FFF' : '#f4f3f4'} ios_backgroundColor="#FFF"/>;
 });
-_Switch.displayName = 'mpx-switch';
+_Switch.displayName = 'MpxSwitch';
 export default _Switch;

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

@@ -36,5 +36,5 @@ const _Text = forwardRef((props, ref) => {
         })}
     </Text>);
 });
-_Text.displayName = 'mpx-text';
+_Text.displayName = 'MpxText';
 export default _Text;

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

@@ -23,5 +23,5 @@ const Textarea = forwardRef((props, ref) => {
     ]);
     return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
 });
-Textarea.displayName = 'mpx-textarea';
+Textarea.displayName = 'MpxTextarea';
 export default Textarea;