@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -3,30 +3,18 @@
  * ✘ space
  * ✘ decode
  */
-import { Text, StyleSheet } from 'react-native';
+import { Text } from 'react-native';
 import { useRef, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
-// @ts-ignore
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { PERCENT_REGEX } from './utils';
-const DEFAULT_STYLE = {
-    fontSize: 16
-};
-const transformStyle = (styleObj) => {
-    let { lineHeight } = styleObj;
-    if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
-        lineHeight = (parseFloat(lineHeight) / 100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize);
-        styleObj.lineHeight = lineHeight;
-    }
-};
+import { transformTextStyle, DEFAULT_STYLE } from './utils';
 const _Text = forwardRef((props, ref) => {
-    const { style = [], children, selectable, 'enable-offset': enableOffset, 'user-select': userSelect, 'disable-default-style': disableDefaultStyle = false, } = props;
+    const { style = {}, children, selectable, 'enable-offset': enableOffset, 'user-select': userSelect, 'disable-default-style': disableDefaultStyle = false, } = props;
     const layoutRef = useRef({});
-    const styleObj = StyleSheet.flatten(style);
     let defaultStyle = {};
     if (!disableDefaultStyle) {
         defaultStyle = DEFAULT_STYLE;
-        transformStyle(styleObj);
+        transformTextStyle(style);
     }
     const { nodeRef } = useNodesRef(props, ref, {
         defaultStyle
@@ -59,9 +47,9 @@ const _Text = forwardRef((props, ref) => {
             };
         }
     }, []);
-    return (<Text style={{ ...defaultStyle, ...styleObj }} selectable={!!selectable || !!userSelect} {...innerProps}>
-        {children}
-      </Text>);
+    return (<Text style={{ ...defaultStyle, ...style }} selectable={!!selectable || !!userSelect} {...innerProps}>
+      {children}
+    </Text>);
 });
 _Text.displayName = 'mpx-text';
 export default _Text;

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

@@ -9,7 +9,7 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
 import { omit } from './utils';

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

@@ -6,26 +6,9 @@
  */
 import { View, Text, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
-// @ts-ignore
 import useInnerProps from './getInnerListeners';
-// @ts-ignore
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { parseUrl, TEXT_STYLE_REGEX, PERCENT_REGEX, isText } from './utils';
-const IMAGE_STYLE_REGEX = /^background(Image|Size|Repeat|Position)$/;
-function groupBy(style, callback, group = {}) {
-    let groupKey = '';
-    for (let key in style) {
-        if (style.hasOwnProperty(key)) { // 确保处理对象自身的属性
-            let val = style[key];
-            groupKey = callback(key, val);
-            if (!group[groupKey]) {
-                group[groupKey] = {};
-            }
-            group[groupKey][key] = val;
-        }
-    }
-    return group;
-}
+import useNodesRef from './useNodesRef';
+import { parseUrl, PERCENT_REGEX, isText, every, normalizeStyle, splitStyle, splitProps, throwReactWarning, transformTextStyle } from './utils';
 const applyHandlers = (handlers, args) => {
     for (let handler of handlers) {
         handler(...args);
@@ -33,19 +16,30 @@ const applyHandlers = (handlers, args) => {
 };
 const checkNeedLayout = (style) => {
     const [width, height] = style.sizeList;
-    return (PERCENT_REGEX.test(`${height}`) && width === 'auto') || (PERCENT_REGEX.test(`${width}`) && height === 'auto');
+    const bp = style.backgroundPosition;
+    // 含有百分号，center 需计算布局
+    const containPercentSymbol = typeof bp[1] === 'string' && PERCENT_REGEX.test(bp[1]) || typeof bp[3] === 'string' && PERCENT_REGEX.test(bp[3]);
+    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,
+        // 是否开启原始宽度的计算
+        needImageSize: typeof width === 'string' && /^cover|contain$/.test(width) || style.sizeList.includes('auto')
+    };
 };
 /**
- * h - 用户设置的高度
- * lh - 容器的高度
- * ratio - 原始图片的宽高比
- * **/
-function calculateSize(h, lh, ratio) {
-    let height, width;
-    if (PERCENT_REGEX.test(`${h}`)) { // auto  px/rpx 
+* h - 用户设置的高度
+* lh - 容器的高度
+* ratio - 原始图片的宽高比
+* **/
+function calculateSize(h, ratio, lh, reverse = false) {
+    let height = 0, width = 0;
+    if (typeof lh === 'boolean') {
+        reverse = lh;
+    }
+    if (typeof h === 'string' && PERCENT_REGEX.test(h)) { // auto  px/rpx 
         if (!lh)
             return null;
-        height = (parseFloat(`${h}`) / 100) * lh;
+        height = (parseFloat(h) / 100) * lh;
         width = height * ratio;
     }
     else { // 2. auto px/rpx - 根据比例计算
@@ -53,8 +47,50 @@ function calculateSize(h, lh, ratio) {
         width = height * ratio;
     }
     return {
-        width,
-        height
+        width: reverse ? height : width,
+        height: reverse ? width : height
+    };
+}
+/**
+ * 用户设置百分比后，转换为偏移量
+ * h - 用户设置图片的高度
+ * ch - 容器的高度
+ * val - 用户设置的百分比
+ * **/
+function calculateSizePosition(h, ch, val) {
+    if (!h || !ch)
+        return 0;
+    // 百分比需要单独的计算
+    if (typeof h === 'string' && PERCENT_REGEX.test(h)) {
+        h = ch * parseFloat(h) / 100;
+    }
+    // (container width - image width) * (position x%) = (x offset value)
+    return (ch - h) * parseFloat(val) / 100;
+}
+function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
+    const bps = preImageInfo.backgroundPosition;
+    if (bps.length === 0)
+        return;
+    let style = {};
+    let imageStyle = imageProps.style || {};
+    for (let i = 0; i < bps.length; i += 2) {
+        let key = bps[i], val = bps[i + 1];
+        // 需要获取 图片宽度 和 容器的宽度 进行计算
+        if (typeof val === 'string' && PERCENT_REGEX.test(val)) {
+            if (i === 0) {
+                style[key] = calculateSizePosition(imageStyle.width, layoutInfo?.width, val);
+            }
+            else {
+                style[key] = calculateSizePosition(imageStyle.height, layoutInfo?.height, val);
+            }
+        }
+        else {
+            style[key] = val;
+        }
+    }
+    imageProps.style = {
+        ...imageProps.style,
+        ...style
     };
 }
 // background-size 转换
@@ -62,51 +98,61 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
     let sizeList = preImageInfo.sizeList;
     if (!sizeList)
         return;
+    const { width: layoutWidth, height: layoutHeight } = layoutInfo || {};
+    const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {};
+    const [width, height] = sizeList;
+    let dimensions = { width: 0, height: 0 };
     // 枚举值
-    if (['cover', 'contain'].includes(`${sizeList[0]}`)) {
-        imageProps.style.resizeMode = sizeList[0];
+    if (typeof width === 'string' && ['cover', 'contain'].includes(width)) {
+        if (layoutInfo && imageSize) {
+            let layoutRatio = layoutWidth / imageSizeWidth;
+            let eleRatio = imageSizeWidth / imageSizeHeight;
+            // 容器宽高比 大于 图片的宽高比，依据宽度作为基准，否则以高度为基准
+            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') {
+                dimensions = calculateSize(layoutHeight, imageSizeWidth / imageSizeHeight);
+            }
+        }
     }
     else {
-        const [width, height] = sizeList;
-        let newWidth = 0, newHeight = 0;
-        const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {};
         if (width === 'auto' && height === 'auto') { // 均为auto
             if (!imageSize)
                 return;
-            newHeight = imageSizeHeight;
-            newWidth = imageSizeWidth;
+            dimensions = {
+                width: imageSizeWidth,
+                height: imageSizeHeight
+            };
         }
         else if (width === 'auto') { // auto px/rpx/%
             if (!imageSize)
                 return;
-            const dimensions = calculateSize(height, layoutInfo?.height, imageSizeWidth / imageSizeHeight);
+            dimensions = calculateSize(height, imageSizeWidth / imageSizeHeight, layoutInfo?.height);
             if (!dimensions)
                 return;
-            newWidth = dimensions.width;
-            newHeight = dimensions.height;
         }
         else if (height === 'auto') { // auto px/rpx/%
             if (!imageSize)
                 return;
-            const dimensions = calculateSize(width, layoutInfo?.width, imageSizeHeight / imageSizeWidth);
+            dimensions = calculateSize(width, imageSizeHeight / imageSizeWidth, layoutInfo?.width, true);
             if (!dimensions)
                 return;
-            newHeight = dimensions.width;
-            newWidth = dimensions.height;
         }
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.style.resizeMode = 'stretch';
-            newWidth = PERCENT_REGEX.test(`${width}`) ? width : +width;
-            newHeight = PERCENT_REGEX.test(`${width}`) ? height : +height;
+            dimensions = {
+                width: typeof width === 'string' && PERCENT_REGEX.test(width) ? width : +width,
+                height: typeof height === 'string' && PERCENT_REGEX.test(height) ? height : +height
+            };
         }
-        // 样式合并
-        imageProps.style = {
-            ...imageProps.style,
-            width: newWidth,
-            height: newHeight
-        };
     }
+    // 样式合并
+    imageProps.style = {
+        ...imageProps.style,
+        ...dimensions
+    };
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
@@ -117,22 +163,98 @@ const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     const imageProps = {
         style: {
             resizeMode: 'cover',
-            ...StyleSheet.absoluteFillObject
+            position: 'absolute'
+            // ...StyleSheet.absoluteFillObject
         }
     };
-    applyHandlers([backgroundSize, backgroundImage], [imageProps, preImageInfo, imageSize, layoutInfo]);
+    applyHandlers([backgroundSize, backgroundImage, backgroundPosition], [imageProps, preImageInfo, imageSize, layoutInfo]);
     if (!imageProps?.src)
         return null;
     return imageProps;
 };
+function isHorizontal(val) {
+    return typeof val === 'string' && /^(left|right)$/.test(val);
+}
+function isVertical(val) {
+    return typeof val === 'string' && /^(top|bottom)$/.test(val);
+}
+function normalizeBackgroundPosition(parts) {
+    if (parts.length === 0)
+        return [];
+    // 定义默认值
+    let hStart = 'left';
+    let hOffset = 0;
+    let vStart = 'top';
+    let vOffset = 0;
+    if (parts.length === 4)
+        return parts;
+    // 归一化
+    if (parts.length === 1) {
+        // 1. center
+        // 2. 2px - hOffset, vOffset(center) - center为50%
+        // 3. 10% - hOffset, vOffset(center) - center为50%
+        // 4. left - hStart, vOffset(center) - center为50%
+        // 5. top - hOffset(center), vStart - center为50%
+        if (isHorizontal(parts[0])) {
+            hStart = parts[0];
+            vOffset = '50%';
+        }
+        else if (isVertical(parts[0])) {
+            vStart = parts[0];
+            hOffset = '50%';
+        }
+        else {
+            hOffset = parts[0];
+            vOffset = '50%';
+        }
+    }
+    else if (parts.length === 2) {
+        // 1. center center - hOffset, vOffset
+        // 2. 10px center - hOffset, vStart
+        // 3. left center - hStart, vOffset
+        // 4. right center - hStart, vOffset
+        // 5. 第一位是 left right 覆盖的是 hStart
+        //             center, 100% 正常的px 覆盖的是 hOffset
+        //     第二位是 top bottom 覆盖的是 vStart
+        //             center, 100% 覆盖的是 vOffset
+        //
+        // 水平方向
+        if (isHorizontal(parts[0])) {
+            hStart = parts[0];
+        }
+        else { // center, 100% 正常的px 覆盖的是 hOffset
+            hOffset = parts[0];
+        }
+        // 垂直方向
+        if (isVertical(parts[1])) {
+            vStart = parts[1];
+        }
+        else { // center, 100% 正常的px 覆盖的是 hOffset
+            vOffset = parts[1];
+        }
+    }
+    else if (parts.length === 3) {
+        // 1. center top 10px / top 10px center 等价 - center为50%
+        // 2. right 10px center / center right 10px 等价 - center为50%
+        // 2. bottom 50px right
+        if (typeof parts[0] === 'string' && typeof parts[1] === 'string' && /^left|bottom|right|top$/.test(parts[0]) && /^left|bottom|right|top$/.test(parts[1])) {
+            [hStart, vStart, vOffset] = parts;
+        }
+        else {
+            [hStart, hOffset, vStart] = parts;
+        }
+    }
+    return [hStart, hOffset, vStart, vOffset];
+}
 function preParseImage(imageStyle) {
-    const { backgroundImage, backgroundSize = ["auto"] } = imageStyle || {};
+    const { backgroundImage, backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {};
     const src = parseUrl(backgroundImage);
     let sizeList = backgroundSize.slice();
-    sizeList.length === 1 && sizeList.push(sizeList[0]);
+    sizeList.length === 1 && sizeList.push('auto');
     return {
         src,
-        sizeList
+        sizeList,
+        backgroundPosition: normalizeBackgroundPosition(backgroundPosition)
     };
 }
 function wrapImage(imageStyle) {
@@ -146,8 +268,8 @@ function wrapImage(imageStyle) {
     // 预解析
     const preImageInfo = preParseImage(imageStyle);
     // 判断是否可挂载onLayout
-    const needLayout = checkNeedLayout(preImageInfo);
-    const { src, sizeList } = preImageInfo;
+    const { needLayout, needImageSize } = checkNeedLayout(preImageInfo);
+    const { src } = preImageInfo;
     useEffect(() => {
         if (!src) {
             setShow(false);
@@ -155,7 +277,7 @@ function wrapImage(imageStyle) {
             layoutInfo.current = null;
             return;
         }
-        if (!sizeList.includes('auto')) {
+        if (!needImageSize) {
             setShow(true);
             return;
         }
@@ -184,11 +306,15 @@ function wrapImage(imageStyle) {
             width,
             height
         };
-        if (sizeInfo.current) {
-            setImageSizeWidth(sizeInfo.current.width);
-            setImageSizeHeight(sizeInfo.current.height);
+        if (!needImageSize) {
+            setLayoutInfoWidth(width);
+            setLayoutInfoHeight(height);
+        }
+        else if (sizeInfo.current) {
             setLayoutInfoWidth(width);
             setLayoutInfoHeight(height);
+            setImageSizeWidth(sizeInfo.current.width);
+            setImageSizeHeight(sizeInfo.current.height);
             setShow(true);
         }
     };
@@ -196,38 +322,60 @@ function wrapImage(imageStyle) {
     {show && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
   </View>;
 }
-function splitStyle(styles) {
-    return groupBy(styles, (key) => {
-        if (TEXT_STYLE_REGEX.test(key))
-            return 'textStyle';
-        else if (IMAGE_STYLE_REGEX.test(key))
-            return 'imageStyle';
-        return 'innerStyle';
-    }, {});
-}
-function every(children, callback) {
-    return children.every((child) => callback(child));
-}
-function wrapChildren(children, textStyle, imageStyle) {
-    children = Array.isArray(children) ? children : [children];
+function wrapChildren(children, props, textStyle, imageStyle) {
+    const { textProps } = splitProps(props);
+    const { 'enable-background-image': enableBackgroundImage } = props;
     if (every(children, (child) => isText(child))) {
-        children = [<Text key='viewTextWrap' style={textStyle}>{children}</Text>];
+        if (textStyle || textProps) {
+            transformTextStyle(textStyle);
+            children = <Text key='viewTextWrap' style={textStyle} {...(textProps || {})}>{children}</Text>;
+        }
     }
     else {
         if (textStyle)
-            console.warn('Text style will be ignored unless every child of the view is Text node!');
+            throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the view is Text node!');
     }
     return [
-        wrapImage(imageStyle),
-        ...children
+        enableBackgroundImage ? wrapImage(imageStyle) : null,
+        children
     ];
 }
 const _View = forwardRef((props, ref) => {
-    const { style = [], children, hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-offset': enableOffset } = props;
+    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 [isHover, setIsHover] = useState(false);
+    let transformStyle = {};
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
     const layoutRef = useRef({});
     // 打平 style 数组
-    const styleObj = StyleSheet.flatten(style);
+    const styleObj = normalizeStyle(style);
     // 默认样式
     const defaultStyle = {
         // flex 布局相关的默认样式
@@ -238,6 +386,23 @@ const _View = forwardRef((props, ref) => {
             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);
+                }
+            }
+        });
+    });
+    if (hasPercentStyle) {
+        transformStyle = percentTransform(combinationStyleProps, { width: containerWidth, height: containerHeight });
+    }
     const { nodeRef } = useNodesRef(props, ref, {
         defaultStyle
     });
@@ -251,14 +416,14 @@ const _View = forwardRef((props, ref) => {
     const setStartTimer = () => {
         dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
         dataRef.current.startTimer = setTimeout(() => {
-            setIsHover(() => true);
+            setIsHover(true);
         }, +hoverStartTime);
     };
     const setStayTimer = () => {
         dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
         dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
         dataRef.current.stayTimer = setTimeout(() => {
-            setIsHover(() => false);
+            setIsHover(false);
         }, +hoverStayTime);
     };
     function onTouchStart(e) {
@@ -271,19 +436,83 @@ const _View = forwardRef((props, ref) => {
         bindtouchend && bindtouchend(e);
         setStayTimer();
     }
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+    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(StyleSheet.flatten([
-        defaultStyle,
-        styleObj,
-        ...(isHover ? hoverStyle : [])
-    ]));
+    const { textStyle, imageStyle, innerStyle } = splitStyle({
+        ...defaultStyle,
+        ...styleObj,
+        ...(isHover ? hoverStyle : null)
+    });
+    const needLayout = enableOffset || hasPercentStyle;
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...enableOffset ? { onLayout } : {},
+        ...needLayout ? { onLayout } : {},
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
             bindtouchend: onTouchEnd
@@ -295,12 +524,13 @@ const _View = forwardRef((props, ref) => {
         'hover-stay-time',
         'hoverStyle',
         'hover-class',
-        'enable-offset'
+        'enable-offset',
+        'enable-background-image'
     ], {
         layoutRef
     });
-    return (<View {...innerProps} style={innerStyle}>
-      {wrapChildren(children, textStyle, imageStyle)}
+    return (<View {...innerProps} style={{ ...innerStyle, ...transformStyle }}>
+      {wrapChildren(children, props, textStyle, imageStyle)}
     </View>);
 });
 _View.displayName = 'mpx-view';

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

@@ -7,22 +7,17 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 // @ts-ignore
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
-import { StyleSheet } from 'react-native';
 const _WebView = forwardRef((props, ref) => {
     const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
-    const defaultWebViewStyle = [
-        {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0
-        }
-    ];
+    const defaultWebViewStyle = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    };
     const { nodeRef: webViewRef } = useNodesRef(props, ref, {
-        defaultStyle: StyleSheet.flatten([
-            ...defaultWebViewStyle
-        ])
+        defaultStyle: defaultWebViewStyle
     });
     const _messageList = [];
     const handleUnload = () => {
@@ -106,9 +101,8 @@ const _WebView = forwardRef((props, ref) => {
             }
         });
     };
-    // @ts-ignore
     return (<Portal>
-    <WebView style={[...defaultWebViewStyle]} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
+    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
   </Portal>);
 });
 _WebView.displayName = 'mpx-web-view';

package/lib/runtime/components/react/dist/types/common.js

@@ -0,0 +1 @@
+export {};