@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.1

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

@@ -16,4 +16,3 @@ interface SwiperItemProps {
 }
 declare const _SwiperItem: import("react").ForwardRefExoticComponent<SwiperItemProps & import("react").RefAttributes<HandlerRef<View, SwiperItemProps>>>;
 export default _SwiperItem;
-//# sourceMappingURL=mpx-swiper-item.d.ts.map

package/lib/runtime/components/react/dist/mpx-swiper.d.ts

@@ -5,6 +5,11 @@ import { GestureHandler } from './utils';
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
+ * ✔ indicator-width
+ * ✔ indicator-height
+ * ✔ indicator-radius
+ * ✔ indicator-spacing
+ * ✔ indicator-margin
  * ✔ indicator-active-color
  * ✔ autoplay
  * ✔ current
@@ -29,6 +34,11 @@ interface SwiperProps {
     scale?: boolean;
     'indicator-dots'?: boolean;
     'indicator-color'?: string;
+    'indicator-width'?: number;
+    'indicator-height'?: number;
+    'indicator-spacing'?: number;
+    'indicator-radius'?: number;
+    'indicator-margin'?: number;
     'indicator-active-color'?: string;
     vertical?: boolean;
     style: {
@@ -46,8 +56,8 @@ interface SwiperProps {
     'wait-for'?: Array<GestureHandler>;
     'simultaneous-handlers'?: Array<GestureHandler>;
     disableGesture?: boolean;
+    'display-multiple-items'?: number;
     bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
 export default SwiperWrapper;
-//# sourceMappingURL=mpx-swiper.d.ts.map

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

@@ -13,23 +13,23 @@ import Portal from './mpx-portal';
 const styles = {
     pagination_x: {
         position: 'absolute',
-        bottom: 25,
+        bottom: 0,
         left: 0,
         right: 0,
         flexDirection: 'row',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagination_y: {
         position: 'absolute',
-        right: 15,
+        right: 0,
         top: 0,
         bottom: 0,
         flexDirection: 'column',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'flex-end'
     },
     pagerWrapperx: {
         position: 'absolute',
@@ -49,16 +49,6 @@ const styles = {
         justifyContent: 'flex-start'
     }
 };
-const dotCommonStyle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginLeft: 3,
-    marginRight: 3,
-    marginTop: 3,
-    marginBottom: 3,
-    zIndex: 98
-};
 const activeDotStyle = {
     zIndex: 99
 };
@@ -71,7 +61,18 @@ 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': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, '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 dotCommonStyle = {
+        width: dotWidth,
+        height: dotHeight,
+        borderRadius: dotRadius,
+        marginLeft: dotSpacing,
+        marginRight: dotSpacing,
+        marginTop: dotSpacing,
+        marginBottom: dotSpacing,
+        zIndex: 98
+    };
+    const displayMultipleItems = props['display-multiple-items'] || 1;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -97,18 +98,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preMarginShared = useSharedValue(preMargin);
     const nextMarginShared = useSharedValue(nextMargin);
     const autoplayShared = useSharedValue(autoplay);
+    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 默认前后补位的元素个数
-    const patchElmNum = circular ? (preMargin ? 2 : 1) : 0;
+    const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0;
     const patchElmNumShared = useSharedValue(patchElmNum);
+    const displayMultipleItemsShared = useSharedValue(displayMultipleItems);
     const circularShared = useSharedValue(circular);
-    const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : []);
     // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
     const childrenLength = useSharedValue(children.length);
     const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width;
     const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height;
     const dir = horizontal === false ? 'y' : 'x';
     const pstep = dir === 'x' ? initWidth : initHeight;
-    const initStep = isNaN(pstep) ? 0 : pstep;
+    const initStep = isNaN(pstep) ? 0 : pstep / displayMultipleItems;
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
@@ -124,8 +126,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
     const moveTranstion = useSharedValue(0);
+    // 记录用户手滑动的方向
+    const moveDir = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    // 记录是否首次，首次不能触发bindchange回调
+    const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     // 判断gesture手势是否需要协同处理、等待手势失败响应
@@ -152,6 +158,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         'style',
         'indicator-dots',
         'indicator-color',
+        'indicator-width',
         'indicator-active-color',
         'previous-margin',
         'vertical',
@@ -167,7 +174,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const { width, height } = e.nativeEvent.layout;
         const realWidth = dir === 'x' ? width - preMargin - nextMargin : width;
         const realHeight = dir === 'y' ? height - preMargin - nextMargin : height;
-        const iStep = dir === 'x' ? realWidth : realHeight;
+        const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems;
         if (iStep !== step.value) {
             step.value = iStep;
             updateCurrent(propCurrent, iStep);
@@ -193,7 +200,17 @@ const SwiperWrapper = forwardRef((props, ref) => {
         for (let i = 0; i < children.length; i++) {
             dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>);
         }
-        return (<View pointerEvents="none" style={styles['pagination_' + dir]}>
+        let paginationStyle = styles['pagination_' + dir];
+        if (paginationMargin) {
+            paginationStyle = {
+                ...paginationStyle,
+                marginBottom: paginationMargin,
+                marginLeft: paginationMargin,
+                marginRight: paginationMargin,
+                marginTop: paginationMargin
+            };
+        }
+        return (<View pointerEvents="none" style={paginationStyle} key="pagination">
         <View style={[styles['pagerWrapper' + dir]]}>
           <Animated.View style={[
                 dotCommonStyle,
@@ -213,19 +230,35 @@ const SwiperWrapper = forwardRef((props, ref) => {
     function renderItems() {
         const intLen = children.length;
         let renderChild = children.slice();
+        // if (circular && intLen > 1) {
+        //   // 最前面加最后一个元素
+        //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+        //   // 最后面加第一个元素
+        //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+        //   if (preMargin) {
+        //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+        //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+        //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+        //   } else {
+        //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
+        //   }
+        // }
         if (circular && intLen > 1) {
-            // 最前面加最后一个元素
-            const lastChild = React.cloneElement(children[intLen - 1], { key: 'clone0' });
-            // 最后面加第一个元素
-            const firstChild = React.cloneElement(children[0], { key: 'clone1' });
-            if (preMargin) {
-                const lastChild1 = React.cloneElement(children[intLen - 2], { key: 'clone2' });
-                const firstChild1 = React.cloneElement(children[1], { key: 'clone3' });
-                renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1]);
-            }
-            else {
-                renderChild = [lastChild].concat(renderChild).concat([firstChild]);
-            }
+            // 动态生成前置补位元素
+            const frontClones = [];
+            // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
+            const startIndex = intLen - (patchElmNum % intLen);
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = (startIndex + i) % intLen;
+                frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }));
+            }
+            // 动态生成后置补位元素
+            const backClones = [];
+            for (let i = 0; i < patchElmNum; i++) {
+                const sourceIndex = i % intLen;
+                backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }));
+            }
+            renderChild = [...frontClones, ...renderChild, ...backClones];
         }
         const arrChildren = renderChild.map((child, index) => {
             const extraStyle = {};
@@ -260,7 +293,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             let nextIndex = currentIndex.value;
             if (!circularShared.value) {
                 // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-                if (currentIndex.value === childrenLength.value - 1) {
+                if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
                     pauseLoop();
                     return;
                 }
@@ -325,11 +358,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+    function handleSwiperChange(current) {
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -379,9 +410,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
+        if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
+        isFirstRef.current = false;
     });
     useEffect(() => {
         let patchStep = 0;
@@ -427,13 +459,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, [autoplay]);
     useEffect(() => {
-        if (circular !== circularShared.value) {
+        if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
             circularShared.value = circular;
-            patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0;
+            patchElmNumShared.value = patchElmNum;
+            displayMultipleItemsShared.value = displayMultipleItems;
             offset.value = getOffset(currentIndex.value, step.value);
         }
-    }, [circular, preMargin]);
+    }, [circular, patchElmNum, displayMultipleItems]);
     const { gestureHandler } = useMemo(() => {
+        // 基于transdir + 当前offset计算索引
         function getTargetPosition(eventData) {
             'worklet';
             // 移动的距离
@@ -450,7 +484,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
-                selectedIndex = moveToIndex;
+                const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value);
+                selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex);
                 moveToTargetPos = selectedIndex * step.value;
             }
             else {
@@ -486,7 +521,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const gestureMovePos = offset.value + translation;
             if (!circularShared.value) {
                 // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-                const posEnd = -step.value * (childrenLength.value - 1);
+                const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value);
                 if (transdir < 0) {
                     return gestureMovePos > posEnd;
                 }
@@ -546,10 +581,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        // 当前的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) {
@@ -558,35 +591,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的translation值(正向滑动<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
-            };
-        }
-        function handleLongPress(eventData) {
-            'worklet';
-            const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
-            if (+diffOffset === 0) {
-                runOnJS(runOnJSCallback)('resumeLoop');
-            }
-            else if (isTriggerUpdateHalf) {
-                // 如果触发了onUpdate时的索引变更
-                handleEnd(eventData);
-            }
-            else if (half) {
-                handleEnd(eventData);
-            }
-            else {
-                handleBack(eventData);
-            }
+            return half;
         }
         function reachBoundary(eventData) {
             'worklet';
             // 1. 基于当前的offset和translation判断是否超过当前边界值
             const { translation } = eventData;
-            const boundaryStart = -patchElmNumShared.value * step.value;
+            // 与终点的逻辑对齐，都是超过补位元素对应的起点offset
+            const boundaryStart = 0;
             const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value;
             const moveToOffset = offset.value + translation;
             let isBoundary = false;
@@ -603,7 +615,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 // 超过边界的距离
                 const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset);
                 // 计算对标正常元素所在的offset
-                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength);
+                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value - exceedLength;
             }
             return {
                 isBoundary,
@@ -616,7 +628,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             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;
+            const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0;
             let resistance = 0.1;
             let overDrag = 0;
             let finalOffset = 0;
@@ -642,6 +654,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             }
             return finalOffset;
         }
+        // 设置手势移动的方向
+        function setMoveDir(curAbsoPos) {
+            'worklet';
+            const distance = curAbsoPos - preAbsolutePos.value;
+            if (distance) {
+                moveDir.value = curAbsoPos - preAbsolutePos.value;
+            }
+        }
         const gesturePan = Gesture.Pan()
             .onBegin((e) => {
             'worklet';
@@ -663,9 +683,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 transdir: moveDistance
             };
             // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-            const { half } = computeHalf(eventData);
-            if (childrenLength.value > 1 && half) {
-                const { selectedIndex } = getTargetPosition(eventData);
+            const offsetHalf = computeHalf();
+            if (childrenLength.value > 1 && offsetHalf) {
+                const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
                 currentIndex.value = selectedIndex;
             }
             // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
@@ -677,6 +697,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     const finalOffset = handleResistanceMove(eventData);
                     offset.value = finalOffset;
                 }
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -684,6 +705,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             if (circularShared.value && childrenLength.value === 1) {
                 const finalOffset = handleResistanceMove(eventData);
                 offset.value = finalOffset;
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -695,6 +717,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
+            setMoveDir(e[strAbso]);
             preAbsolutePos.value = e[strAbso];
         })
             .onFinalize((e) => {
@@ -703,10 +726,21 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             touchfinish.value = true;
             // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+            // 正常状态下基于onUpdate时的moveDir判断方向、未触发onUpdate的则基于onBegin的moveTranstion判断方向
             const moveDistance = e[strAbso] - preAbsolutePos.value;
+            // 默认兜底方向: 以onBegin为起点，因一些原因未触发onUpdate但是触发了位移
+            const defaultDir = e[strAbso] - moveTranstion.value;
+            // 实时方向：方向基于onUpdate时的方向，滑动的速度超过阈值时基于实时的滑动方向计算
+            const realtimeData = {
+                transdir: moveDir.value || defaultDir
+            };
+            // 起始方向：基于用户起始手势
+            const originData = {
+                transdir: defaultDir
+            };
             const eventData = {
                 translation: moveDistance,
-                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+                transdir: realtimeData.transdir
             };
             // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {
@@ -720,21 +754,39 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为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);
+                if (realtimeData.transdir < 0) {
+                    handleBack(realtimeData);
                 }
                 else {
-                    handleEnd(eventData);
+                    handleEnd(realtimeData);
                 }
                 return;
             }
             // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
             const velocity = e[strVelocity];
-            if (Math.abs(velocity) < longPressRatio) {
-                handleLongPress(eventData);
+            // 用于判断是否超过一半，基于索引判断是否超过一半不可行(1.滑动过程中索引会变更导致计算反向, 2.边界场景会更新offset也会导致基于索引+offset判断实效)
+            const tmp = offset.value % step.value > step.value / 2;
+            // 小于0手向左滑动
+            const offsetHalf = originData.transdir < 0 ? tmp : !tmp;
+            if (offsetHalf) {
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleEnd(originData);
+                }
             }
             else {
-                handleEnd(eventData);
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleBack(originData);
+                }
             }
         })
             .withRef(swiperGestureRef);
@@ -770,6 +822,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         style: [normalStyle, layoutStyle, styles.swiper]
     }, layoutProps, innerProps);
     const animateComponent = createElement(Animated.View, {
+        key: 'swiperContainer',
         style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
     }, wrapChildren({
         children: arrPages

package/lib/runtime/components/react/dist/mpx-switch.d.ts

@@ -24,4 +24,3 @@ interface _SwitchProps extends SwitchProps {
 }
 declare const _Switch: import("react").ForwardRefExoticComponent<_SwitchProps & import("react").RefAttributes<HandlerRef<Switch, _SwitchProps>>>;
 export default _Switch;
-//# sourceMappingURL=mpx-switch.d.ts.map

package/lib/runtime/components/react/dist/mpx-text.d.ts

@@ -20,4 +20,3 @@ interface _TextProps extends TextProps {
 }
 declare const _Text: import("react").ForwardRefExoticComponent<_TextProps & import("react").RefAttributes<HandlerRef<Text, _TextProps>>>;
 export default _Text;
-//# sourceMappingURL=mpx-text.d.ts.map

package/lib/runtime/components/react/dist/mpx-textarea.d.ts

@@ -5,4 +5,3 @@ import { HandlerRef } from './useNodesRef';
 export type TextareProps = Omit<InputProps & PrivateInputProps, 'type' | 'password' | 'multiline' | 'confirm-hold'>;
 declare const Textarea: import("react").ForwardRefExoticComponent<TextareProps & import("react").RefAttributes<HandlerRef<TextInput, TextareProps>>>;
 export default Textarea;
-//# sourceMappingURL=mpx-textarea.d.ts.map

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

@@ -4,6 +4,7 @@
  *     type, password, confirm-hold
  *   Addition:
  *     ✔ confirm-type
+ *     ✘ confirm-hold
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar

package/lib/runtime/components/react/dist/mpx-video.d.ts

@@ -99,4 +99,3 @@ interface VideoProps {
 }
 declare const MpxVideo: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HandlerRef<View, VideoProps>>>;
 export default MpxVideo;
-//# sourceMappingURL=mpx-video.d.ts.map

package/lib/runtime/components/react/dist/mpx-view.d.ts

@@ -6,7 +6,8 @@
  */
 import { View, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { ReactNode } from 'react';
-import type { AnimationProp } from './useAnimationHooks';
+import { AnimationType } from './animationHooks/index';
+import type { AnimationProp } from './animationHooks/utils';
 import { ExtendedViewStyle } from './types/common';
 import { HandlerRef } from './useNodesRef';
 export interface _ViewProps extends ViewProps {
@@ -23,7 +24,7 @@ export interface _ViewProps extends ViewProps {
     'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
-    'enable-animation'?: boolean;
+    'enable-animation'?: boolean | AnimationType;
     bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
     bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
@@ -32,4 +33,3 @@ export interface _ViewProps extends ViewProps {
 }
 declare const _View: import("react").ForwardRefExoticComponent<_ViewProps & import("react").RefAttributes<HandlerRef<View, _ViewProps>>>;
 export default _View;
-//# sourceMappingURL=mpx-view.d.ts.map

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

@@ -8,7 +8,7 @@ import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
-import useAnimationHooks from './useAnimationHooks';
+import useAnimationHooks from './animationHooks/index';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error, isFunction } from '@mpxjs/utils';
@@ -203,7 +203,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+            if (type === 'linear' && (!layoutWidth || !layoutHeight) && (isPercent(width) || isPercent(height))) {
                 // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
                 // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
                 dimensions = {
@@ -274,6 +274,18 @@ function normalizeBackgroundPosition(parts) {
     let hOffset = 0;
     let vStart = 'top';
     let vOffset = 0;
+    if (!Array.isArray(parts)) {
+        // 模板 style 属性传入单个数值时不会和 class 一样转成数组，需要手动转换
+        parts = [parts];
+    }
+    // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh 以及 center 转化为 50%
+    parts = parts.map((part) => {
+        if (typeof part !== 'string')
+            return part;
+        if (part === 'center')
+            return '50%';
+        return global.__formatValue(part);
+    });
     if (parts.length === 4)
         return parts;
     // 归一化
@@ -415,14 +427,16 @@ function normalizeBackgroundSize(backgroundSize, type) {
     const sizeList = backgroundSize.slice();
     if (sizeList.length === 1)
         sizeList.push('auto');
-    if (type === 'linear') {
+    return sizeList.map((val) => {
+        if (typeof val !== 'string')
+            return val;
         // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
-        for (const i in sizeList) {
-            const val = sizeList[i];
-            sizeList[i] = /^cover|contain|auto$/.test(val) ? '100%' : val;
+        if (type === 'linear' && /^cover|contain|auto$/.test(val)) {
+            val = '100%';
         }
-    }
-    return sizeList;
+        // 模板 style 属性传入时， 需要额外转换处理单位 px/rpx/vh
+        return global.__formatValue(val);
+    });
 }
 function preParseImage(imageStyle) {
     const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};

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

@@ -20,4 +20,3 @@ interface WebViewProps {
 }
 declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebView<{}>, WebViewProps>>>;
 export default _WebView;
-//# sourceMappingURL=mpx-web-view.d.ts.map

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

@@ -184,7 +184,7 @@ const _WebView = forwardRef((props, ref) => {
                 }
                 break;
             case 'postMessage':
-                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                bindmessage && bindmessage(getCustomEvent('message', {}, {
                     detail: {
                         data: params[0]?.data
                     }

package/lib/runtime/components/react/dist/parser.d.ts

@@ -37,4 +37,3 @@ export declare class ReplaceSource {
     source(): string;
 }
 export {};
-//# sourceMappingURL=parser.d.ts.map

package/lib/runtime/components/react/dist/useNodesRef.d.ts

@@ -9,4 +9,3 @@ export type HandlerRef<T, P> = {
 };
 export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
 export {};
-//# sourceMappingURL=useNodesRef.d.ts.map