@mpxjs/webpack-plugin 2.10.17-beta.6 → 2.10.17-beta.7

package/lib/platform/style/wx/index.js

@@ -139,11 +139,10 @@ module.exports = function getSpec ({ warn, error }) {
     const type = getValueType(prop)
     const tipsType = (type) => {
       const info = {
-        [ValueType.number]: '2rpx,10%,30rpx',
         [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000',
         [ValueType.enum]: `${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}`
       }
-      tips(`Value of ${prop} in ${selector} should be ${type}, eg ${info[type]}, received [${value}], please check again!`)
+      tips(`Value of ${prop} in ${selector} should be ${type}${info[type] ? `, eg ${info[type]}` : ''}, received [${value}], please check again!`)
     }
     switch (type) {
       case ValueType.number: {
@@ -549,15 +548,6 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatZIndex = ({ prop, value, selector }, { mode }) => {
-    // z-index auto 报错
-    if (value === 'auto') {
-      error(`Property [${prop}] does not supported [${value}] on ${selector} in ${mode} environment, please check again!`)
-      return { prop, value: 0 }
-    }
-    return { prop, value: value }
-  }
-
   // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
   //   value = value.trim()
   //   if (value === 'none') {
@@ -623,12 +613,6 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'z-index',
-        ios: formatZIndex,
-        android: formatZIndex,
-        harmony: formatZIndex
-      },
       // {
       //   test: 'box-shadow',
       //   ios: formatBoxShadow,

package/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -1,4 +1,4 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils'
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils'
 import { useMemo, useRef, useEffect } from 'react'
 import {
   Easing,
@@ -169,10 +169,11 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
     return parseTransitionStyle(originalStyle)
   }, [])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-  const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+  const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName
     const animatedKeys = [] as string[]
-    const animatedKeysShareVal = [] as (string|string[])[]
+    // 有动画样式的 style key(useAnimatedStyle使用)
+    const animatedStyleKeys = [] as (string|string[])[]
     const transforms = [] as string[]
     const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
       // const { property } = transition || {}
@@ -189,20 +190,18 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
         valMap[property] = makeMutable(defaultVal)
         animatedKeys.push(property)
-        animatedKeysShareVal.push(property)
+        animatedStyleKeys.push(property)
       }
       // console.log('shareValMap = ', valMap)
       return valMap
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
-    if (transforms.length) animatedKeysShareVal.push(transforms)
+    if (transforms.length) animatedStyleKeys.push(transforms)
     return {
       shareValMap,
       animatedKeys,
-      animatedKeysShareVal
+      animatedStyleKeys
     }
   }, [])
-  // 有动画样式的 style key(useAnimatedStyle使用)
-  const animatedStyleKeys = useSharedValue(animatedKeysShareVal)
   const runOnJSCallbackRef = useRef({})
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
   // 根据 animation action 创建&驱动动画
@@ -228,32 +227,37 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
         toVal = `${toVal * 100}%`
       } else if (typeof toVal !== typeof shareVal) {
         // 动画起始值和终态值类型不一致报错提示一下
-        error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
+        warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`)
       }
-      // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-      const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
-      // console.log('animationOptions=', { delay, duration, easing })
-      let callback
-      if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-        runOnJSCallbackRef.current = {
-          animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
-            transitionend(finished, current, duration)
+      if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+        // 有 auto 直接赋值不做动画
+        shareValMap[key].value = toVal
+      } else {
+        // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+        const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key]
+        // console.log('animationOptions=', { delay, duration, easing })
+        let callback
+        if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+          runOnJSCallbackRef.current = {
+            animationCallback: (duration: number, finished: boolean, current?: AnimatableValue) => {
+              transitionend(finished, current, duration)
+            }
           }
-        }
-        callback = (finished?: boolean, current?: AnimatableValue) => {
-          'worklet'
-          // 动画结束后设置下一次transformOrigin
-          if (finished) {
-            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+          callback = (finished?: boolean, current?: AnimatableValue) => {
+            'worklet'
+            // 动画结束后设置下一次transformOrigin
+            if (finished) {
+              runOnJS(runOnJSCallback)('animationCallback', duration, finished, current)
+            }
           }
         }
+        const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
+        // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+        if (isTransformKey) {
+          transformTransitionendDone = true
+        }
+        shareValMap[key].value = animation
       }
-      const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, callback)
-      // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-      if (isTransformKey) {
-        transformTransitionendDone = true
-      }
-      shareValMap[key].value = animation
       // console.log(`useTransitionHooks, ${key}=`, animation)
     })
   }
@@ -278,7 +282,7 @@ export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType
   // ** 生成动画样式
   return useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
-    return animatedStyleKeys.value.reduce((styles, key) => {
+    return animatedStyleKeys.reduce((styles, key) => {
       if (Array.isArray(key)) {
         const transformStyle = getTransformObj(originalStyle.transform || [])
         key.forEach((transformKey) => {

package/lib/runtime/components/react/animationHooks/utils.ts

@@ -94,8 +94,9 @@ export const transformInitial: ExtendedViewStyle = {
 export const animationAPIInitialValue: ExtendedViewStyle = Object.assign({
   opacity: 1,
   backgroundColor: 'transparent',
-  width: 0,
-  height: 0,
+  // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+  width: 'auto',
+  height: 'auto',
   top: 0,
   right: 0,
   bottom: 0,

package/lib/runtime/components/react/dist/animationHooks/useTransitionHooks.js

@@ -1,6 +1,6 @@
-import { hasOwn, dash2hump, error } from '@mpxjs/utils';
+import { hasOwn, dash2hump, error, warn } from '@mpxjs/utils';
 import { useMemo, useRef, useEffect } from 'react';
-import { Easing, makeMutable, runOnJS, useSharedValue, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
+import { Easing, makeMutable, runOnJS, useAnimatedStyle, cancelAnimation } from 'react-native-reanimated';
 import { easingKey, transitionSupportedProperty, transformInitial, cubicBezierExp, secondRegExp, percentExp, getTransformObj, getUnit, getInitialVal, getAnimation, isTransform } from './utils';
 import { parseValues, useRunOnJSCallback } from '../utils';
 const propName = {
@@ -141,10 +141,11 @@ export default function useTransitionHooks(props) {
         return parseTransitionStyle(originalStyle);
     }, []);
     // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
-    const { shareValMap, animatedKeys, animatedKeysShareVal } = useMemo(() => {
+    const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
         // 记录需要执行动画的 propName
         const animatedKeys = [];
-        const animatedKeysShareVal = [];
+        // 有动画样式的 style key(useAnimatedStyle使用)
+        const animatedStyleKeys = [];
         const transforms = [];
         const shareValMap = Object.keys(transitionMap).reduce((valMap, property) => {
             // const { property } = transition || {}
@@ -162,21 +163,19 @@ export default function useTransitionHooks(props) {
                 // console.log(`shareValMap property=${property} defaultVal=${defaultVal}`)
                 valMap[property] = makeMutable(defaultVal);
                 animatedKeys.push(property);
-                animatedKeysShareVal.push(property);
+                animatedStyleKeys.push(property);
             }
             // console.log('shareValMap = ', valMap)
             return valMap;
         }, {});
         if (transforms.length)
-            animatedKeysShareVal.push(transforms);
+            animatedStyleKeys.push(transforms);
         return {
             shareValMap,
             animatedKeys,
-            animatedKeysShareVal
+            animatedStyleKeys
         };
     }, []);
-    // 有动画样式的 style key(useAnimatedStyle使用)
-    const animatedStyleKeys = useSharedValue(animatedKeysShareVal);
     const runOnJSCallbackRef = useRef({});
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 根据 animation action 创建&驱动动画
@@ -204,32 +203,38 @@ export default function useTransitionHooks(props) {
             }
             else if (typeof toVal !== typeof shareVal) {
                 // 动画起始值和终态值类型不一致报错提示一下
-                error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
+                warn(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
             }
-            // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
-            const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
-            // console.log('animationOptions=', { delay, duration, easing })
-            let callback;
-            if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
-                runOnJSCallbackRef.current = {
-                    animationCallback: (duration, finished, current) => {
-                        transitionend(finished, current, duration);
-                    }
-                };
-                callback = (finished, current) => {
-                    'worklet';
-                    // 动画结束后设置下一次transformOrigin
-                    if (finished) {
-                        runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
-                    }
-                };
+            if ((toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal))) {
+                // 有 auto 直接赋值不做动画
+                shareValMap[key].value = toVal;
             }
-            const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
-            // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
-            if (isTransformKey) {
-                transformTransitionendDone = true;
+            else {
+                // console.log(`key=${key} oldVal=${shareValMap[key].value} newVal=${toVal}`)
+                const { delay = 0, duration, easing } = transitionMap[isTransformKey ? 'transform' : key];
+                // console.log('animationOptions=', { delay, duration, easing })
+                let callback;
+                if (transitionend && (!isTransformKey || !transformTransitionendDone)) {
+                    runOnJSCallbackRef.current = {
+                        animationCallback: (duration, finished, current) => {
+                            transitionend(finished, current, duration);
+                        }
+                    };
+                    callback = (finished, current) => {
+                        'worklet';
+                        // 动画结束后设置下一次transformOrigin
+                        if (finished) {
+                            runOnJS(runOnJSCallback)('animationCallback', duration, finished, current);
+                        }
+                    };
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, callback);
+                // Todo transform 有多个属性时也仅执行一次 transitionend（对齐wx）
+                if (isTransformKey) {
+                    transformTransitionendDone = true;
+                }
+                shareValMap[key].value = animation;
             }
-            shareValMap[key].value = animation;
             // console.log(`useTransitionHooks, ${key}=`, animation)
         });
     }
@@ -254,7 +259,7 @@ export default function useTransitionHooks(props) {
     // ** 生成动画样式
     return useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
-        return animatedStyleKeys.value.reduce((styles, key) => {
+        return animatedStyleKeys.reduce((styles, key) => {
             if (Array.isArray(key)) {
                 const transformStyle = getTransformObj(originalStyle.transform || []);
                 key.forEach((transformKey) => {

package/lib/runtime/components/react/dist/animationHooks/utils.js

@@ -47,8 +47,9 @@ export const transformInitial = {
 export const animationAPIInitialValue = Object.assign({
     opacity: 1,
     backgroundColor: 'transparent',
-    width: 0,
-    height: 0,
+    // fixme 未设置 height 初始值定义了 transition-property height 时把动画高度值把原由子元素撑开的高度给覆盖的问题
+    width: 'auto',
+    height: 'auto',
     top: 0,
     right: 0,
     bottom: 0,

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

@@ -16,7 +16,7 @@ import { noop } from '@mpxjs/utils';
 import { SvgCssUri } from 'react-native-svg/css';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
 import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
@@ -104,7 +104,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, isTransformBorderRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,

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

@@ -128,6 +128,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTranstion = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    // 记录是否首次
+    const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     // 判断gesture手势是否需要协同处理、等待手势失败响应
@@ -355,10 +357,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
         };
     }, []);
     function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -408,9 +408,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;

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

@@ -39,8 +39,9 @@ interface TransformStyleConfig {
     parentFontSize?: number;
     parentWidth?: number;
     parentHeight?: number;
+    isTransformBorderRadiusPercent?: boolean;
 }
-export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
     hasVarDec: boolean;
     varContextRef: MutableRefObject<{}>;
     setWidth: Dispatch<SetStateAction<number>>;

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

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
@@ -110,15 +110,17 @@ export function splitStyle(styleObj) {
         }
     });
 }
-const selfPercentRule = {
-    translateX: 'width',
-    translateY: 'height',
+const radiusPercentRule = {
     borderTopLeftRadius: 'width',
     borderBottomLeftRadius: 'width',
     borderBottomRightRadius: 'width',
     borderTopRightRadius: 'width',
     borderRadius: 'width'
 };
+const selfPercentRule = Object.assign({
+    translateX: 'width',
+    translateY: 'height'
+}, radiusPercentRule);
 const parentHeightPercentRule = {
     height: true,
     minHeight: true,
@@ -193,7 +195,7 @@ function transformVar(styleObj, varKeyPaths, varContext, visitOther) {
             const resolved = resolveVar(value, varContext);
             if (resolved === undefined) {
                 delete target[key];
-                // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+                error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`);
                 return;
             }
             target[key] = resolved;
@@ -343,15 +345,7 @@ function transformBoxShadow(styleObj) {
         return `${res}${idx === 0 ? '' : ' '}${global.__formatValue(i)}`;
     }, '');
 }
-function transformZIndex(styleObj) {
-    if (!styleObj.zIndex || typeof styleObj.zIndex === 'number')
-        return;
-    if (styleObj.zIndex === 'auto') {
-        error('Property [z-index] does not supported [auto], please check again!');
-        styleObj.zIndex = 0;
-    }
-}
-export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
+export function useTransformStyle(styleObj = {}, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const unoVarStyle = {};
     const normalStyle = {};
@@ -403,7 +397,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     function calcVisitor({ key, value, keyPath }) {
         if (calcUseRegExp.test(value)) {
             // calc translate & border-radius 的百分比计算
-            if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+            if (hasOwn(selfPercentRule, key) && /calc\(\d+%/.test(value)) {
                 hasSelfPercent = true;
                 percentKeyPaths.push(keyPath.slice());
             }
@@ -412,7 +406,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     }
     function percentVisitor({ key, value, keyPath }) {
         // fixme 去掉 translate & border-radius 的百分比计算
-        if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+        // fixme Image 组件 borderRadius 仅支持 number
+        if (isTransformBorderRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
+            hasSelfPercent = true;
+            percentKeyPaths.push(keyPath.slice());
+        }
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
             percentKeyPaths.push(keyPath.slice());
         }
     }
@@ -485,11 +484,6 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     transformStringify(normalStyle);
     // transform rpx to px
     transformBoxShadow(normalStyle);
-    // transform z-index auto to 0
-    transformZIndex(normalStyle);
-    if (Array.isArray(normalStyle.transform)) {
-        normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item));
-    }
     return {
         hasVarDec,
         varContextRef,

package/lib/runtime/components/react/mpx-image.tsx

@@ -26,7 +26,7 @@ import { noop } from '@mpxjs/utils'
 import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -190,7 +190,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, isTransformBorderRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -232,6 +232,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  // 记录是否首次
+  const isFirstRef = useRef(true)
 
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
@@ -477,10 +479,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [])
 
   function handleSwiperChange (current: number, pCurrent: number) {
-    if (pCurrent !== currentIndex.value) {
-      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      bindchange && bindchange(eventData)
-    }
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindchange && bindchange(eventData)
   }
 
   const runOnJSCallbackRef = useRef({
@@ -529,9 +529,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && bindchange) {
+    if (newIndex !== preIndex && bindchange && !isFirstRef.current) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
+    isFirstRef.current = false
   })
 
   useEffect(() => {

package/lib/runtime/components/react/utils.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
 import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
-import { runOnJS } from 'react-native-reanimated'
 import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
@@ -143,16 +142,17 @@ export function splitStyle<T extends Record<string, any>> (styleObj: T): {
     innerStyle: Partial<T>
   }
 }
-
-const selfPercentRule: Record<string, 'height' | 'width'> = {
-  translateX: 'width',
-  translateY: 'height',
+const radiusPercentRule: Record<string, 'height' | 'width'> = {
   borderTopLeftRadius: 'width',
   borderBottomLeftRadius: 'width',
   borderBottomRightRadius: 'width',
   borderTopRightRadius: 'width',
   borderRadius: 'width'
 }
+const selfPercentRule: Record<string, 'height' | 'width'> = Object.assign({
+  translateX: 'width',
+  translateY: 'height'
+}, radiusPercentRule)
 
 const parentHeightPercentRule: Record<string, boolean> = {
   height: true,
@@ -238,7 +238,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
       const resolved = resolveVar(value, varContext)
       if (resolved === undefined) {
         delete target[key]
-        // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+        error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
         return
       }
       target[key] = resolved
@@ -390,23 +390,16 @@ function transformBoxShadow (styleObj: Record<string, any>) {
   }, '')
 }
 
-function transformZIndex (styleObj: Record<string, any>) {
-  if (!styleObj.zIndex || typeof styleObj.zIndex === 'number') return
-  if (styleObj.zIndex === 'auto') {
-    error('Property [z-index] does not supported [auto], please check again!')
-    styleObj.zIndex = 0
-  }
-}
-
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
   parentFontSize?: number
   parentWidth?: number
   parentHeight?: number
+  isTransformBorderRadiusPercent?: boolean
 }
 
-export function useTransformStyle (styleObj: Record<string, any> = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig) {
+export function useTransformStyle (styleObj: Record<string, any> = {}, { enableVar, isTransformBorderRadiusPercent, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig) {
   const varStyle: Record<string, any> = {}
   const unoVarStyle: Record<string, any> = {}
   const normalStyle: Record<string, any> = {}
@@ -457,7 +450,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   function calcVisitor ({ key, value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
       // calc translate & border-radius 的百分比计算
-      if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+      if (hasOwn(selfPercentRule, key) && /calc\(\d+%/.test(value)) {
         hasSelfPercent = true
         percentKeyPaths.push(keyPath.slice())
       }
@@ -467,7 +460,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
 
   function percentVisitor ({ key, value, keyPath }: VisitorArg) {
     // fixme 去掉 translate & border-radius 的百分比计算
-    if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+    // fixme Image 组件 borderRadius 仅支持 number
+    if (isTransformBorderRadiusPercent && hasOwn(radiusPercentRule, key) && PERCENT_REGEX.test(value)) {
+      hasSelfPercent = true
+      percentKeyPaths.push(keyPath.slice())
+    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
       percentKeyPaths.push(keyPath.slice())
     }
   }
@@ -477,8 +474,10 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
     }
   }
+
   // transform 字符串格式转化数组格式(先转数组再处理css var)
   transformTransform(styleObj)
+
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
   hasVarDec = hasVarDec || !!externalVarContext
@@ -544,11 +543,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformStringify(normalStyle)
   // transform rpx to px
   transformBoxShadow(normalStyle)
-  // transform z-index auto to 0
-  transformZIndex(normalStyle)
-  if (Array.isArray(normalStyle.transform)) {
-    normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item))
-  }
+
   return {
     hasVarDec,
     varContextRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.17-beta.6",
+  "version": "2.10.17-beta.7",
   "description": "mpx compile core",
   "keywords": [
     "mpx"