@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -5,6 +5,7 @@ import { Animated, View, Dimensions, Platform } from 'react-native';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from '../utils';
 /**
  * 默认的Style类型
  */
@@ -13,10 +14,10 @@ const styles = {
         backgroundColor: 'transparent'
     },
     container_x: {
-        position: 'relative',
+        position: 'relative'
     },
     container_y: {
-        position: 'relative',
+        position: 'relative'
     },
     pagination_x: {
         position: 'absolute',
@@ -26,7 +27,7 @@ const styles = {
         flexDirection: 'row',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center'
     },
     pagination_y: {
         position: 'absolute',
@@ -36,19 +37,27 @@ const styles = {
         flexDirection: 'column',
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center'
     }
 };
 const _Carouse = forwardRef((props, ref) => {
     // 默认取水平方向的width
     const { width } = Dimensions.get('window');
-    const { styleObj } = props;
+    const { style, previousMargin = 0, nextMargin = 0, enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight } = props;
+    // 计算transfrom之类的
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { textProps } = splitProps(props);
     const newChild = Array.isArray(props.children) ? props.children.filter(child => child) : props.children;
     const totalElements = Array.isArray(newChild) ? newChild.length : (newChild ? 1 : 0);
-    // const defaultHeight = (styleObj?.height || 150) - previousMargin - nextMargin
-    // const defaultWidth = (styleObj?.width || width || 375) - previousMargin - nextMargin
-    const defaultHeight = (styleObj?.height || 150);
-    const defaultWidth = (styleObj?.width || width || 375);
+    const defaultHeight = (normalStyle?.height || 150);
+    const defaultWidth = (normalStyle?.width || width || 375);
     const dir = props.horizontal === false ? 'y' : 'x';
     // state的offset默认值
     // const initIndex = props.circular ? props.current + 1: (props.current || 0)
@@ -56,15 +65,15 @@ const _Carouse = forwardRef((props, ref) => {
     const initIndex = props.current || 0;
     // 这里要排除超过元素个数的设置
     const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
-    // const defaultX = (defaultWidth * initOffsetIndex + previousMargin) || 0
-    // const defaultY = (defaultHeight * initOffsetIndex + previousMargin) || 0
     const defaultX = (defaultWidth * initOffsetIndex) || 0;
     const defaultY = (defaultHeight * initOffsetIndex) || 0;
     // 内部存储上一次的offset值
     const autoplayTimerRef = useRef(null);
-    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {});
+    const scrollViewRef = useRef(null);
+    useNodesRef(props, ref, scrollViewRef, {});
+    const { 
     // 存储layout布局信息
-    const layoutRef = useRef({});
+    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout });
     // 内部存储上一次的偏移量
     const internalsRef = useRef({
         offset: {
@@ -76,8 +85,8 @@ const _Carouse = forwardRef((props, ref) => {
     const isDragRef = useRef(false);
     const [state, setState] = useState({
         children: newChild,
-        width: defaultWidth || 375,
-        height: defaultHeight,
+        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,
@@ -102,36 +111,64 @@ const _Carouse = forwardRef((props, ref) => {
             createAutoPlay();
         }
     }, [props.autoplay, props.current, state.index, state.width, state.height]);
+    useEffect(() => {
+        // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
+        if (!props.autoplay && 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
+                };
+            });
+        }
+    }, [props.current]);
     /**
      * @desc: 更新状态: index和offset, 并响应索引变化的事件
      * scrollViewOffset: 移动到的目标位置
     */
     function updateIndex(scrollViewOffset, useIndex = false) {
         const { nextIndex, nextOffset } = getNextConfig(scrollViewOffset);
-        internalsRef.current.offset = nextOffset;
+        updateState(nextIndex, nextOffset);
+        // 更新完状态之后, 开启新的loop
+    }
+    /**
+     * 更新索引状态
+    */
+    function updateState(index, offset) {
+        internalsRef.current.offset = offset;
         setState((preState) => {
             const newState = {
                 ...preState,
-                index: nextIndex,
+                index: index,
                 // offset用来指示当前scrollView的偏移量
-                offset: nextOffset,
+                offset: offset
             };
             return newState;
         });
         internalsRef.current.isScrolling = false;
         // getCustomEvent
-        const eventData = getCustomEvent('change', {}, { detail: { current: nextIndex, source: 'touch' }, layoutRef: layoutRef });
+        const eventData = getCustomEvent('change', {}, { detail: { current: index, source: 'touch' }, layoutRef: layoutRef });
         props.bindchange && props.bindchange(eventData);
-        // 更新完状态之后, 开启新的loop
     }
     /**
      * @desc: 获取下一个位置的索引、scrollView的contentOffset、scrollTo到的offset
      * @desc: 包括正循环、反向循环、不循环
-     * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset, 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
+     * 其中循环模式为了实现无缝链接, 会将结合contentOffset, 和 scrollTo的offset,
+     * 先scrollTo一个位置的坐标, 然后通过updateIndex设置真正的index和内容的offset,视觉上是无缝
     */
     function getNextConfig(scrollViewOffset) {
         const step = state.dir === 'x' ? state.width : state.height;
-        let currentOffset = state.offset;
+        const currentOffset = state.offset;
         let nextIndex = state.index + 1;
         let nextOffset = currentOffset;
         // autoMoveOffset scrollView 滚动到前后增加的位置
@@ -154,8 +191,8 @@ const _Carouse = forwardRef((props, ref) => {
                     autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: 0 });
                     nextIndex = state.total - 1;
                     // 反向: 数组最后一个index
-                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total }),
-                        isAutoEnd = true;
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * state.total });
+                    isAutoEnd = true;
                 }
                 else {
                     // 反向非最后一个
@@ -166,8 +203,8 @@ const _Carouse = forwardRef((props, ref) => {
                 if (nextIndex > state.total - 1) {
                     autoMoveOffset = Object.assign({}, currentOffset, { [state.dir]: step * (nextIndex + 1) });
                     nextIndex = 0;
-                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step }),
-                        isAutoEnd = true;
+                    nextOffset = Object.assign({}, currentOffset, { [state.dir]: step });
+                    isAutoEnd = true;
                 }
                 else {
                     // nextIndex =  nextIndex,
@@ -176,8 +213,11 @@ const _Carouse = forwardRef((props, ref) => {
             }
         }
         return {
+            // 下一个要滚动到的实际元素的索引
             nextIndex,
+            // 下一个要滚动到实际元素的offset
             nextOffset,
+            // scrollTo一个位置的坐标, 虚拟元素的位置
             autoMoveOffset,
             isAutoEnd
         };
@@ -199,45 +239,39 @@ const _Carouse = forwardRef((props, ref) => {
         // 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 });
+                scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true });
             }
             else {
                 if (state.dir === 'x') {
-                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true });
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.x, animated: true });
                 }
                 else {
-                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true });
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.y, y: autoMoveOffset.y, animated: true });
                 }
             }
         }
         else {
             if (!isAutoEnd) {
-                scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true });
+                scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true });
                 onScrollEnd({
                     nativeEvent: {
-                        // @ts-ignore
-                        x: +nextOffset['x'],
-                        y: +nextOffset['y']
+                        contentOffset: {
+                            x: +nextOffset.x,
+                            y: +nextOffset.y
+                        }
                     }
                 });
             }
             else {
-                setTimeout(() => {
-                    onScrollEnd({
-                        nativeEvent: {
-                            // @ts-ignore
-                            x: 0,
-                            y: 0
-                        }
-                    });
-                }, 10);
+                // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
                 if (state.dir === 'x') {
                     scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true });
-                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset['x'], y: autoMoveOffset['x'], animated: true })
+                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
                 }
                 else {
-                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset['y'], y: autoMoveOffset['y'], animated: true });
+                    scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true });
                 }
+                updateState(0, nextOffset);
             }
         }
     }
@@ -269,16 +303,6 @@ const _Carouse = forwardRef((props, ref) => {
         const internalOffset = internalsRef.current.offset;
         const previousOffset = props.horizontal ? internalOffset.x : internalOffset.y;
         const moveOffset = props.horizontal ? contentOffset.x : contentOffset.y;
-        // const diff = moveOffset - previousOffset
-        /*
-        if (diff > 0 && state.index + 1 >= total) {
-          const { nextOffset } = getNextConfig(contentOffset)
-          // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
-        } else if ( diff < 0 && state.index -1 < 0) {
-          const { nextOffset } = getNextConfig(contentOffset)
-          // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: false })
-        }
-        */
         if (previousOffset === moveOffset && (index === 0 || index === total - 1)) {
             internalsRef.current.isScrolling = false;
         }
@@ -286,9 +310,13 @@ const _Carouse = forwardRef((props, ref) => {
     /**
      * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
     */
-    function onWrapperLayout() {
+    function onWrapperLayout(e) {
+        if (hasSelfPercent) {
+            const { width, height } = e?.nativeEvent?.layout || {};
+            setWidth(width || 0);
+            setHeight(height || 0);
+        }
         if (props.enableOffset) {
-            // @ts-ignore
             scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
                 layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
                 const isWDiff = state.width !== width;
@@ -298,12 +326,14 @@ const _Carouse = forwardRef((props, ref) => {
                         width: isWDiff ? width : state.width,
                         height: isHDiff ? height : state.height
                     };
-                    let correctOffset = Object.assign({}, state.offset, {
+                    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 = width;
-                    state.height = height;
+                    state.width = changeState.width;
+                    state.height = changeState.height;
                     setState((preState) => {
                         return {
                             ...preState,
@@ -312,17 +342,38 @@ const _Carouse = forwardRef((props, ref) => {
                             height: changeState.height
                         };
                     });
-                    scrollViewRef.current?.scrollTo({ x: correctOffset['x'], y: correctOffset['y'], animated: false });
+                    scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false });
                 }
                 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);
+            }
+        }
+        return offsetArray;
+    }
     function renderScrollView(pages) {
-        let scrollElementProps = {
+        const offsetsArray = getOffset();
+        const scrollElementProps = {
             ref: scrollViewRef,
             horizontal: props.horizontal,
-            pagingEnabled: true,
+            pagingEnabled: false,
+            snapToOffsets: offsetsArray,
+            decelerationRate: 0.99,
             showsHorizontalScrollIndicator: false,
             showsVerticalScrollIndicator: false,
             bounces: false,
@@ -338,7 +389,7 @@ const _Carouse = forwardRef((props, ref) => {
     function renderPagination() {
         if (state.total <= 1)
             return null;
-        let dots = [];
+        const dots = [];
         const activeDotStyle = [{
                 backgroundColor: props.activeDotColor || '#007aff',
                 width: 8,
@@ -375,37 +426,52 @@ const _Carouse = forwardRef((props, ref) => {
         const { width, height, total, children } = state;
         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)) {
             let arrElements = [];
             // pages = ["2", "0", "1", "2", "0"]
-            let pages = Array.isArray(children) && Object.keys(children) || [];
+            const pages = Array.isArray(children) ? Object.keys(children) : [];
             /* 无限循环的时候 */
             if (circular) {
                 pages.unshift(total - 1 + '');
                 pages.push('0');
             }
             arrElements = pages.map((page, i) => {
-                return (<View style={[pageStyle, styles.slide]} key={'page' + i}>
-            {children[+page]}
-          </View>);
+                const extraStyle = {};
+                if (i === 0 && dir === 'x' && typeof width === 'number') {
+                    previousMargin && (extraStyle.marginLeft = previousMargin);
+                }
+                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]
+                    }, {
+                        hasVarDec,
+                        varContext: varContextRef.current,
+                        textStyle,
+                        textProps
+                    })}
+        </View>);
             });
             return arrElements;
         }
         else {
-            return (<View style={pageStyle} key={0}>
+            const realElement = (<View style={pageStyle} key={0}>
           {children}
         </View>);
+            return realElement;
         }
     }
     const pages = renderPages();
-    const strStyle = 'container_' + state.dir;
-    const eventProps = props.innerProps || {};
-    const layoutStyle = dir === 'x' ? { width: defaultWidth, height: defaultHeight } : { width: defaultWidth };
-    return (<View style={[layoutStyle]}>
-    <View style={[styles[strStyle], layoutStyle]} {...eventProps} onLayout={onWrapperLayout}>
+    return (<View style={[normalStyle, innerStyle, layoutStyle]} {...layoutProps}>
       {renderScrollView(pages)}
-    </View>
-    <View>{props.showsPagination && renderPagination()}</View>
+      {props.showsPagination && renderPagination()}
   </View>);
 });
 _Carouse.displayName = '_Carouse';

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

@@ -1,5 +1,5 @@
 import { forwardRef, useRef } from 'react';
-import { default as Carouse } from './carouse';
+import Carouse from './carouse';
 import useInnerProps from '../getInnerListeners';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 /**
@@ -20,7 +20,7 @@ import useNodesRef from '../useNodesRef'; // 引入辅助函数
  */
 const _SwiperWrapper = forwardRef((props, ref) => {
     const { children } = props;
-    let innerLayout = useRef({});
+    const innerLayout = useRef({});
     const swiperProp = {
         circular: props.circular || false,
         current: props.current || 0,
@@ -28,17 +28,23 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         duration: props.duration || 500,
         interval: props.interval || 5000,
         showsPagination: props['indicator-dots'],
-        dotColor: props['indicator-color'] || "rgba(0, 0, 0, .3)",
+        dotColor: props['indicator-color'] || 'rgba(0, 0, 0, .3)',
         activeDotColor: props['indicator-active-color'] || '#000000',
         horizontal: props.vertical !== undefined ? !props.vertical : true,
-        styleObj: props.style || {},
         previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
         nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
         enableOffset: props['enable-offset'] || true,
+        enableVar: props['enable-var'] || false,
+        parentFontSize: props['parent-font-size'],
+        parentWidth: props['parent-width'],
+        parentHeight: props['parent-height'],
+        style: props.style || {},
+        externalVarContext: props['external-var-context'],
         bindchange: props.bindchange,
         easingFunction: props['easing-function'] || 'default'
     };
-    const { nodeRef } = useNodesRef(props, ref, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [
@@ -46,12 +52,15 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         'indicator-color',
         'indicator-active-color',
         'previous-margin',
-        'next-margin'
+        'vertical',
+        'previous-margin',
+        'next-margin',
+        'easing-function'
     ], { layoutRef: innerLayout });
     const getInnerLayout = (layout) => {
         innerLayout.current = layout.current;
     };
-    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...swiperProp}>
+    return <Carouse getInnerLayout={getInnerLayout} innerProps={innerProps} {...innerProps} {...swiperProp}>
     {children}
   </Carouse>;
 });

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

@@ -2,23 +2,32 @@ import { View } from 'react-native';
 import { forwardRef, useRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 const _SwiperItem = forwardRef((props, ref) => {
-    const { children, 'enable-offset': enableOffset, style } = props;
-    const layoutRef = useRef({});
-    const { nodeRef } = useNodesRef(props, ref, {});
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
+    const { 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
+    const { textProps } = splitProps(props);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const { 
+    // 存储layout布局信息
+    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const innerProps = useInnerProps(props, {
-        ...(enableOffset ? { onLayout } : {}),
+        style: { ...innerStyle, ...layoutStyle },
+        ref: nodeRef,
+        ...layoutProps
     }, [
         'children',
         'enable-offset'
     ], { layoutRef });
-    return (<View ref={nodeRef} data-itemId={props['item-id']} style={[style]} {...innerProps}>
-      {children}
+    return (<View data-itemId={props['item-id']} {...innerProps}>
+       {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
     </View>);
 });
 _SwiperItem.displayName = 'mpx-swiper-item';

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

@@ -6,25 +6,34 @@
  */
 import { Switch } from 'react-native';
 import { useRef, useEffect, forwardRef, useState, useContext } from 'react';
+import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import CheckBox from './mpx-checkbox';
 import { FormContext } from './context';
-import { throwReactWarning } from './utils';
+import { useTransformStyle, useLayout } from './utils';
 const _Switch = forwardRef((props, ref) => {
-    const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-offset': enableOffset, bindchange, catchchange, } = props;
+    const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange, catchchange } = props;
     const [isChecked, setIsChecked] = useState(checked);
-    const layoutRef = useRef({});
     const changeHandler = bindchange || catchchange;
     let formValuesMap;
     const formContext = useContext(FormContext);
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
     useEffect(() => {
         setIsChecked(checked);
     }, [checked]);
-    const { nodeRef } = useNodesRef(props, ref);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const onChange = (evt, { checked } = {}) => {
         if (type === 'switch') {
             setIsChecked(evt);
@@ -43,23 +52,18 @@ const _Switch = forwardRef((props, ref) => {
     };
     if (formValuesMap) {
         if (!props.name) {
-            throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.');
+            warn('If a form component is used, the name attribute is required.');
         }
         else {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const onLayout = () => {
-        nodeRef.current?.measure?.((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...enableOffset ? { onLayout } : {},
+        style: { ...normalStyle, ...layoutStyle },
+        ...layoutProps,
         ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
     }, [
-        'style',
         'checked',
         'disabled',
         'type',
@@ -68,9 +72,9 @@ const _Switch = forwardRef((props, ref) => {
         layoutRef
     });
     if (type === 'checkbox') {
-        return <CheckBox {...innerProps} color={color} style={style} checked={isChecked}/>;
+        return <CheckBox {...innerProps} color={color} style={normalStyle} checked={isChecked}/>;
     }
-    return (<Switch {...innerProps} style={style} value={isChecked} trackColor={{ false: "#FFF", true: color }} thumbColor={isChecked ? "#FFF" : "#f4f3f4"} ios_backgroundColor="#FFF"/>);
+    return <Switch {...innerProps} style={normalStyle} value={isChecked} trackColor={{ false: '#FFF', true: color }} thumbColor={isChecked ? '#FFF' : '#f4f3f4'} ios_backgroundColor="#FFF"/>;
 });
 _Switch.displayName = 'mpx-switch';
 export default _Switch;