@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -4,26 +4,74 @@
  * ✔ hover-start-time
  * ✔ hover-stay-time
  */
-import { View, Text, StyleSheet, Image } from 'react-native';
+import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, isText, every, normalizeStyle, splitStyle, splitProps, throwReactWarning, transformTextStyle } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils';
+import LinearGradient from 'react-native-linear-gradient';
+const linearMap = new Map([
+    ['top', 0],
+    ['bottom', 180],
+    ['left', 270],
+    ['right', 90]
+]);
+// 对角线角度
+const diagonalAngleMap = {
+    'top right': (width, height) => {
+        return Math.acos((width / 2) /
+            (Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 2));
+    },
+    'right top': (width, height) => { return diagonalAngleMap['top right'](width, height); },
+    'bottom right': (width, height) => Math.PI - diagonalAngleMap['top right'](width, height),
+    'right bottom': (width, height) => { return diagonalAngleMap['bottom right'](width, height); },
+    'bottom left': (width, height) => Math.PI + diagonalAngleMap['top right'](width, height),
+    'left bottom': (width, height) => { return diagonalAngleMap['bottom left'](width, height); },
+    'top left': (width, height) => (2 * Math.PI) - diagonalAngleMap['top right'](width, height),
+    'left top': (width, height) => { return diagonalAngleMap['top left'](width, height); }
+};
+// 弧度转化为角度的公式
+function radToAngle(r) {
+    return r * 180 / Math.PI;
+}
 const applyHandlers = (handlers, args) => {
-    for (let handler of handlers) {
+    for (const handler of handlers) {
         handler(...args);
     }
 };
-const checkNeedLayout = (style) => {
-    const [width, height] = style.sizeList;
-    const bp = style.backgroundPosition;
+const normalizeStyle = (style = {}) => {
+    ['backgroundSize', 'backgroundPosition'].forEach(name => {
+        if (style[name] && typeof style[name] === 'string') {
+            if (style[name].trim()) {
+                style[name] = style[name].split(' ');
+            }
+        }
+    });
+    return style;
+};
+const isPercent = (val) => typeof val === 'string' && PERCENT_REGEX.test(val);
+const isBackgroundSizeKeyword = (val) => typeof val === 'string' && /^cover|contain$/.test(val);
+const isNeedLayout = (preImageInfo) => {
+    const { sizeList, backgroundPosition, linearInfo } = preImageInfo;
+    const [width, height] = sizeList;
+    const bp = backgroundPosition;
     // 含有百分号，center 需计算布局
-    const containPercentSymbol = typeof bp[1] === 'string' && PERCENT_REGEX.test(bp[1]) || typeof bp[3] === 'string' && PERCENT_REGEX.test(bp[3]);
+    return isBackgroundSizeKeyword(width) ||
+        (isPercent(height) && width === 'auto') ||
+        (isPercent(width) && height === 'auto') ||
+        isPercent(bp[1]) ||
+        isPercent(bp[3]) ||
+        isDiagonalAngle(linearInfo);
+};
+const checkNeedLayout = (preImageInfo) => {
+    const { sizeList } = preImageInfo;
+    const [width] = sizeList;
+    // 在渐变的时候，background-size的cover，contain, auto属性值，转化为100%, needLayout计算逻辑和原来保持一致，needImageSize始终为false
     return {
         // 是否开启layout的计算
-        needLayout: typeof width === 'string' && /^cover|contain$/.test(width) || (typeof height === 'string' && PERCENT_REGEX.test(height) && width === 'auto') || (typeof width === 'string' && PERCENT_REGEX.test(width) && height === 'auto') || containPercentSymbol,
+        needLayout: isNeedLayout(preImageInfo),
         // 是否开启原始宽度的计算
-        needImageSize: typeof width === 'string' && /^cover|contain$/.test(width) || style.sizeList.includes('auto')
+        needImageSize: isBackgroundSizeKeyword(width) || sizeList.includes('auto')
     };
 };
 /**
@@ -32,11 +80,12 @@ const checkNeedLayout = (style) => {
 * ratio - 原始图片的宽高比
 * **/
 function calculateSize(h, ratio, lh, reverse = false) {
-    let height = 0, width = 0;
+    let height = 0;
+    let width = 0;
     if (typeof lh === 'boolean') {
         reverse = lh;
     }
-    if (typeof h === 'string' && PERCENT_REGEX.test(h)) { // auto  px/rpx 
+    if (isPercent(h)) { // auto  px/rpx
         if (!lh)
             return null;
         height = (parseFloat(h) / 100) * lh;
@@ -61,22 +110,31 @@ function calculateSizePosition(h, ch, val) {
     if (!h || !ch)
         return 0;
     // 百分比需要单独的计算
-    if (typeof h === 'string' && PERCENT_REGEX.test(h)) {
+    if (isPercent(h)) {
         h = ch * parseFloat(h) / 100;
     }
     // (container width - image width) * (position x%) = (x offset value)
     return (ch - h) * parseFloat(val) / 100;
 }
+/**
+* 获取图片的展示宽高
+* h - 用户设置的高度
+* lh - 容器的高度
+* **/
+const calcPercent = (h, lh) => {
+    return isPercent(h) ? parseFloat(h) / 100 * lh : +h;
+};
 function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
     const bps = preImageInfo.backgroundPosition;
     if (bps.length === 0)
         return;
-    let style = {};
-    let imageStyle = imageProps.style || {};
+    const style = {};
+    const imageStyle = imageProps.style || {};
     for (let i = 0; i < bps.length; i += 2) {
-        let key = bps[i], val = bps[i + 1];
+        const key = bps[i];
+        const val = bps[i + 1];
         // 需要获取 图片宽度 和 容器的宽度 进行计算
-        if (typeof val === 'string' && PERCENT_REGEX.test(val)) {
+        if (isPercent(val)) {
             if (i === 0) {
                 style[key] = calculateSizePosition(imageStyle.width, layoutInfo?.width, val);
             }
@@ -95,7 +153,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
-    let sizeList = preImageInfo.sizeList;
+    const sizeList = preImageInfo.sizeList;
     if (!sizeList)
         return;
     const { width: layoutWidth, height: layoutHeight } = layoutInfo || {};
@@ -105,13 +163,13 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
     // 枚举值
     if (typeof width === 'string' && ['cover', 'contain'].includes(width)) {
         if (layoutInfo && imageSize) {
-            let layoutRatio = layoutWidth / imageSizeWidth;
-            let eleRatio = imageSizeWidth / imageSizeHeight;
+            const layoutRatio = layoutWidth / imageSizeWidth;
+            const eleRatio = imageSizeWidth / imageSizeHeight;
             // 容器宽高比 大于 图片的宽高比，依据宽度作为基准，否则以高度为基准
-            if (layoutRatio <= eleRatio && width === 'contain' || layoutRatio >= eleRatio && width === 'cover') {
+            if ((layoutRatio <= eleRatio && width === 'contain') || (layoutRatio >= eleRatio && width === 'cover')) {
                 dimensions = calculateSize(layoutWidth, imageSizeHeight / imageSizeWidth, true);
             }
-            else if (layoutRatio > eleRatio && width === 'contain' || layoutRatio < eleRatio && width === 'cover') {
+            else if ((layoutRatio > eleRatio && width === 'contain') || (layoutRatio < eleRatio && width === 'cover')) {
                 dimensions = calculateSize(layoutHeight, imageSizeWidth / imageSizeHeight);
             }
         }
@@ -143,8 +201,8 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
             // 数值类型设置为 stretch
             imageProps.style.resizeMode = 'stretch';
             dimensions = {
-                width: typeof width === 'string' && PERCENT_REGEX.test(width) ? width : +width,
-                height: typeof height === 'string' && PERCENT_REGEX.test(height) ? height : +height
+                width: isPercent(width) ? width : +width,
+                height: isPercent(height) ? height : +height
             };
         }
     }
@@ -156,7 +214,27 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
-    imageProps.src = preImageInfo.src;
+    if (preImageInfo.src) {
+        imageProps.src = preImageInfo.src;
+    }
+}
+// 渐变的转换
+function linearGradient(imageProps, preImageInfo, imageSize, layoutInfo) {
+    const { type, linearInfo } = preImageInfo;
+    const { colors = [], locations, direction = '' } = linearInfo || {};
+    const { width, height } = imageSize || {};
+    if (type !== 'linear')
+        return;
+    // 角度计算
+    let angle = +(linearMap.get(direction) || direction.match(/(-?\d+(\.\d+)?)deg/)?.[1] || 180) % 360;
+    // 对角线角度计算
+    if (layoutInfo && diagonalAngleMap[direction] && imageSize && linearInfo) {
+        angle = radToAngle(diagonalAngleMap[direction](width, height)) || 180;
+    }
+    // 赋值
+    imageProps.colors = colors;
+    imageProps.locations = locations;
+    imageProps.angle = angle;
 }
 const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     // 初始化
@@ -165,11 +243,10 @@ const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
             resizeMode: 'cover',
             position: 'absolute'
             // ...StyleSheet.absoluteFillObject
-        }
+        },
+        colors: []
     };
-    applyHandlers([backgroundSize, backgroundImage, backgroundPosition], [imageProps, preImageInfo, imageSize, layoutInfo]);
-    if (!imageProps?.src)
-        return null;
+    applyHandlers([backgroundSize, backgroundImage, backgroundPosition, linearGradient], [imageProps, preImageInfo, imageSize, layoutInfo]);
     return imageProps;
 };
 function isHorizontal(val) {
@@ -246,59 +323,162 @@ function normalizeBackgroundPosition(parts) {
     }
     return [hStart, hOffset, vStart, vOffset];
 }
+/**
+ *
+ * calcSteps - 计算起始位置和终点位置之间的差值
+ *    startVal - 起始位置距离
+ *    endVal - 终点位置距离
+ *    len - 数量
+ * **/
+function calcSteps(startVal, endVal, len) {
+    const diffVal = endVal - startVal;
+    const step = diffVal / len;
+    const newArr = [];
+    for (let i = 1; i < len; i++) {
+        const val = startVal + step * i;
+        newArr.push(+val.toFixed(2));
+    }
+    return newArr;
+}
+function parseLinearGradient(text) {
+    let linearText = text.trim().match(/linear-gradient\((.*)\)/)?.[1];
+    if (!linearText)
+        return;
+    // 添加默认的角度
+    if (!/^to|^-?\d+deg/.test(linearText)) {
+        linearText = '180deg ,' + linearText;
+    }
+    else {
+        linearText = linearText.replace('to', '');
+    }
+    // 把 0deg, red 10%, blue 20% 解析为 ['0deg', 'red, 10%', 'blue, 20%']
+    const [direction, ...colorList] = linearText.split(/,(?![^(#]*\))/);
+    // 记录需要填充起点的起始位置
+    let startIdx = 0;
+    let startVal = 0;
+    // 把 ['red, 10%', 'blue, 20%']解析为 [[red, 10%], [blue, 20%]]
+    const linearInfo = colorList.map(item => item.trim().split(/(?<!,)\s+/))
+        .reduce((prev, cur, idx, self) => {
+        const { colors, locations } = prev;
+        const [color, val] = cur;
+        let numberVal = parseFloat(val) / 100;
+        // 处理渐变默认值
+        if (idx === 0) {
+            numberVal = numberVal || 0;
+        }
+        else if (self.length - 1 === idx) {
+            numberVal = numberVal || 1;
+        }
+        // 出现缺省值时进行填充
+        if (idx - startIdx > 1 && !isNaN(numberVal)) {
+            locations.push(...calcSteps(startVal, numberVal, idx - startIdx));
+        }
+        if (!isNaN(numberVal)) {
+            startIdx = idx;
+            startVal = numberVal;
+        }
+        // 添加color的数组
+        colors.push(color.trim());
+        !isNaN(numberVal) && locations.push(numberVal);
+        return prev;
+    }, { colors: [], locations: [] });
+    return {
+        ...linearInfo,
+        direction: direction.trim()
+    };
+}
+function parseBgImage(text) {
+    if (!text)
+        return {};
+    const src = parseUrl(text);
+    if (src)
+        return { src, type: 'image' };
+    const linearInfo = parseLinearGradient(text);
+    if (!linearInfo)
+        return {};
+    return {
+        linearInfo,
+        type: 'linear'
+    };
+}
+function normalizeBackgroundSize(backgroundSize, type) {
+    const sizeList = backgroundSize.slice();
+    if (sizeList.length === 1)
+        sizeList.push('auto');
+    if (type === 'linear') {
+        // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
+        for (const i in sizeList) {
+            const val = sizeList[i];
+            sizeList[i] = /^cover|contain|auto$/.test(val) ? '100%' : val;
+        }
+    }
+    return sizeList;
+}
 function preParseImage(imageStyle) {
-    const { backgroundImage, backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {};
-    const src = parseUrl(backgroundImage);
-    let sizeList = backgroundSize.slice();
-    sizeList.length === 1 && sizeList.push('auto');
+    const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};
+    const { type, src, linearInfo } = parseBgImage(backgroundImage);
     return {
         src,
-        sizeList,
+        linearInfo,
+        type,
+        sizeList: normalizeBackgroundSize(backgroundSize, type),
         backgroundPosition: normalizeBackgroundPosition(backgroundPosition)
     };
 }
+function isDiagonalAngle(linearInfo) {
+    return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction]);
+}
 function wrapImage(imageStyle) {
-    const [show, setShow] = useState(false);
+    // 预处理数据
+    const preImageInfo = preParseImage(imageStyle);
+    // 预解析
+    const { src, sizeList, type } = preImageInfo;
+    // 判断是否可挂载onLayout
+    const { needLayout, needImageSize } = checkNeedLayout(preImageInfo);
+    const [show, setShow] = useState(((type === 'image' && !!src) || type === 'linear') && !needLayout && !needImageSize);
     const [, setImageSizeWidth] = useState(null);
     const [, setImageSizeHeight] = useState(null);
     const [, setLayoutInfoWidth] = useState(null);
     const [, setLayoutInfoHeight] = useState(null);
     const sizeInfo = useRef(null);
     const layoutInfo = useRef(null);
-    // 预解析
-    const preImageInfo = preParseImage(imageStyle);
-    // 判断是否可挂载onLayout
-    const { needLayout, needImageSize } = checkNeedLayout(preImageInfo);
-    const { src } = preImageInfo;
     useEffect(() => {
+        sizeInfo.current = null;
+        if (type === 'linear') {
+            if (!needLayout)
+                setShow(true);
+            return;
+        }
         if (!src) {
             setShow(false);
-            sizeInfo.current = null;
-            layoutInfo.current = null;
             return;
+            // 一开始未出现，数据改变时出现
         }
-        if (!needImageSize) {
+        else if (!(needLayout || needImageSize)) {
             setShow(true);
             return;
         }
-        Image.getSize(src, (width, height) => {
-            sizeInfo.current = {
-                width,
-                height
-            };
-            //1. 当需要绑定onLayout 2. 获取到布局信息
-            if (!needLayout || layoutInfo.current) {
-                setImageSizeWidth(width);
-                setImageSizeHeight(height);
-                if (layoutInfo.current) {
-                    setLayoutInfoWidth(layoutInfo.current.width);
-                    setLayoutInfoHeight(layoutInfo.current.height);
+        if (needImageSize) {
+            Image.getSize(src, (width, height) => {
+                sizeInfo.current = {
+                    width,
+                    height
+                };
+                // 1. 当需要绑定onLayout 2. 获取到布局信息
+                if (!needLayout || layoutInfo.current) {
+                    setImageSizeWidth(width);
+                    setImageSizeHeight(height);
+                    if (layoutInfo.current) {
+                        setLayoutInfoWidth(layoutInfo.current.width);
+                        setLayoutInfoHeight(layoutInfo.current.height);
+                    }
+                    setShow(true);
                 }
-                setShow(true);
-            }
-        });
-    }, [preImageInfo?.src]);
-    if (!preImageInfo?.src)
+            });
+        }
+        // type 添加type 处理无渐变 有渐变的场景
+    }, [src, type]);
+    if (!type)
         return null;
     const onLayout = (res) => {
         const { width, height } = res?.nativeEvent?.layout || {};
@@ -309,6 +489,16 @@ function wrapImage(imageStyle) {
         if (!needImageSize) {
             setLayoutInfoWidth(width);
             setLayoutInfoHeight(height);
+            // 有渐变角度的时候，才触发渲染组件
+            if (type === 'linear') {
+                sizeInfo.current = {
+                    width: calcPercent(sizeList[0], width),
+                    height: calcPercent(sizeList[1], height)
+                };
+                setImageSizeWidth(sizeInfo.current.width);
+                setImageSizeHeight(sizeInfo.current.height);
+            }
+            setShow(true);
         }
         else if (sizeInfo.current) {
             setLayoutInfoWidth(width);
@@ -318,92 +508,57 @@ function wrapImage(imageStyle) {
             setShow(true);
         }
     };
-    return <View key='viewBgImg' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
-    {show && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
   </View>;
 }
-function wrapChildren(children, props, textStyle, imageStyle) {
-    const { textProps } = splitProps(props);
-    const { 'enable-background-image': enableBackgroundImage } = props;
-    if (every(children, (child) => isText(child))) {
-        if (textStyle || textProps) {
-            transformTextStyle(textStyle);
-            children = <Text key='viewTextWrap' style={textStyle} {...(textProps || {})}>{children}</Text>;
-        }
-    }
-    else {
-        if (textStyle)
-            throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the view is Text node!');
-    }
+function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }) {
+    const children = wrapChildren(props, {
+        hasVarDec,
+        varContext,
+        textStyle,
+        textProps
+    });
     return [
-        enableBackgroundImage ? wrapImage(imageStyle) : null,
+        enableBackground ? wrapImage(backgroundStyle) : null,
         children
     ];
 }
-const _View = forwardRef((props, ref) => {
-    const combinationStyleProps = [{
-            key: 'transform',
-            rules: {
-                width: 'translateX',
-                height: 'translateY'
-            }
-        }, {
-            key: 'borderTopLeftRadius',
-            rules: {
-                width: 'borderTopLeftRadius'
-            }
-        }, {
-            key: 'borderBottomLeftRadius',
-            rules: {
-                width: 'borderBottomLeftRadius'
-            }
-        }, {
-            key: 'borderBottomRightRadius',
-            rules: {
-                height: 'borderBottomRightRadius'
-            }
-        }, {
-            key: 'borderTopRightRadius',
-            rules: {
-                height: 'borderTopRightRadius'
-            }
-        }];
-    const { style = {}, children, hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-offset': enableOffset, } = props;
+const _View = forwardRef((viewProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(viewProps);
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isHover, setIsHover] = useState(false);
-    let transformStyle = {};
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [containerHeight, setContainerHeight] = useState(0);
-    const layoutRef = useRef({});
-    // 打平 style 数组
-    const styleObj = normalizeStyle(style);
     // 默认样式
     const defaultStyle = {
         // flex 布局相关的默认样式
-        ...styleObj.display === 'flex' && {
+        ...style.display === 'flex' && {
             flexDirection: 'row',
             flexBasis: 'auto',
             flexShrink: 1,
             flexWrap: 'nowrap'
         }
     };
-    const hasPercentStyle = combinationStyleProps.some(({ key, rules }) => {
-        return Object.entries(rules).some(([dimension, transformKey]) => {
-            const transformItemValue = styleObj[key];
-            if (transformItemValue) {
-                if (Array.isArray(transformItemValue)) {
-                    const transformValue = transformItemValue.find((item) => item.hasOwnProperty(transformKey));
-                    return transformValue && PERCENT_REGEX.test(transformValue[transformKey]);
-                }
-                else if (typeof transformItemValue === 'string') {
-                    return PERCENT_REGEX.test(transformItemValue);
-                }
-            }
-        });
+    const styleObj = {
+        ...defaultStyle,
+        ...style,
+        ...(isHover ? hoverStyle : null)
+    };
+    const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
     });
-    if (hasPercentStyle) {
-        transformStyle = percentTransform(combinationStyleProps, { width: containerWidth, height: containerHeight });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    enableBackground = enableBackground || !!backgroundStyle;
+    const enableBackgroundRef = useRef(enableBackground);
+    if (enableBackgroundRef.current !== enableBackground) {
+        throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
     }
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle
     });
     const dataRef = useRef({});
@@ -436,101 +591,32 @@ const _View = forwardRef((props, ref) => {
         bindtouchend && bindtouchend(e);
         setStayTimer();
     }
-    function percentTransform(style, { width, height }) {
-        const styleMap = {};
-        style.forEach((styleItem) => {
-            const transformItemValue = styleObj[styleItem.key];
-            if (Array.isArray(transformItemValue)) {
-                const transformStyle = [];
-                styleObj[styleItem.key].forEach((transformItem) => {
-                    const rules = styleItem.rules;
-                    for (const type in rules) {
-                        const value = transformItem[rules[type]];
-                        if (value !== undefined) {
-                            if (PERCENT_REGEX.test(value)) {
-                                const percentage = parseFloat(value) / 100;
-                                if (type === 'height' && height) {
-                                    transformStyle.push({ [rules[type]]: percentage * height });
-                                }
-                                else if (type === 'width' && width) {
-                                    transformStyle.push({ [rules[type]]: percentage * width });
-                                }
-                                else {
-                                    transformStyle.push({ [rules[type]]: 0 });
-                                }
-                            }
-                            else {
-                                transformStyle.push(transformItem);
-                            }
-                        }
-                    }
-                });
-                styleMap[styleItem.key] = transformStyle;
-            }
-            else if (typeof transformItemValue === 'string') {
-                const rules = styleItem.rules;
-                for (const type in rules) {
-                    if (transformItemValue) {
-                        if (PERCENT_REGEX.test(transformItemValue)) {
-                            const percentage = parseFloat(transformItemValue) / 100;
-                            if (type === 'height' && height) {
-                                styleMap[styleItem.key] = percentage * height;
-                            }
-                            else if (type === 'width' && width) {
-                                styleMap[styleItem.key] = percentage * width;
-                            }
-                            else {
-                                styleMap[styleItem.key] = 0;
-                            }
-                        }
-                        else {
-                            styleMap[styleItem.key] = transformItemValue;
-                        }
-                    }
-                }
-            }
-        });
-        return styleMap;
-    }
-    const onLayout = (res) => {
-        if (hasPercentStyle) {
-            const { width, height } = res?.nativeEvent?.layout || {};
-            setContainerWidth(width || 0);
-            setContainerHeight(height || 0);
-        }
-        if (enableOffset) {
-            nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-            });
-        }
-    };
-    const { textStyle, imageStyle, innerStyle } = splitStyle({
-        ...defaultStyle,
-        ...styleObj,
-        ...(isHover ? hoverStyle : null)
-    });
-    const needLayout = enableOffset || hasPercentStyle;
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...needLayout ? { onLayout } : {},
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
             bindtouchend: onTouchEnd
         })
     }, [
-        'style',
-        'children',
         'hover-start-time',
         'hover-stay-time',
-        'hoverStyle',
-        'hover-class',
-        'enable-offset',
-        'enable-background-image'
+        'hover-style',
+        'hover-class'
     ], {
         layoutRef
     });
-    return (<View {...innerProps} style={{ ...innerStyle, ...transformStyle }}>
-      {wrapChildren(children, props, textStyle, imageStyle)}
+    return (<View {...innerProps}>
+      {wrapWithChildren(props, {
+            hasVarDec,
+            enableBackground: enableBackgroundRef.current,
+            textStyle,
+            backgroundStyle,
+            varContext: varContextRef.current,
+            textProps
+        })}
     </View>);
 });
 _View.displayName = 'mpx-view';