@mpxjs/webpack-plugin 2.9.65 → 2.9.66

package/lib/index.js

@@ -139,6 +139,7 @@ class MpxWebpackPlugin {
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
+    options.customTextRules = options.customTextRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
       include: () => true
@@ -173,6 +174,7 @@ class MpxWebpackPlugin {
     options.subpackageModulesRules = options.subpackageModulesRules || {}
     options.forceMainPackageRules = options.forceMainPackageRules || {}
     options.forceProxyEventRules = options.forceProxyEventRules || {}
+    options.disableRequireAsync = options.disableRequireAsync || false
     options.miniNpmPackages = options.miniNpmPackages || []
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
@@ -687,6 +689,7 @@ class MpxWebpackPlugin {
           projectName: this.options.projectName,
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
+          customTextRules: this.options.customTextRules,
           transRpxRules: this.options.transRpxRules,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
@@ -708,7 +711,8 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode),
+          // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {

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

@@ -190,12 +190,16 @@ module.exports = function getSpec ({ warn, error }) {
     flex: ['flexGrow', 'flexShrink', 'flexBasis'],
     // flex-flow: <'flex-direction'> or flex-flow: <'flex-direction'> and <'flex-wrap'>
     'flex-flow': ['flexDirection', 'flexWrap'],
-    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+    'border-radius': ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'],
+    'border-width': ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],
+    'border-color': ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],
+    margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
+    padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']
   }
   const formatAbbreviation = ({ prop, value, selector }, { mode }) => {
     const original = `${prop}:${value}`
     const props = AbbreviationMap[prop]
-    const values = parseValues(value)
+    const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
     let idx = 0
     let propsIdx = 0
@@ -255,32 +259,20 @@ module.exports = function getSpec ({ warn, error }) {
     return cssMap
   }
 
-  // margin padding
-  const formatMargins = ({ prop, value, selector }) => {
-    const values = parseValues(value)
-    // format
-    let suffix = []
+  const formatCompositeVal = ({ prop, value, selector }, { mode }) => {
+    const values = parseValues(value).splice(0, 4)
     switch (values.length) {
-      // case 1:
+      case 1:
+        verifyValues({ prop, value, selector }, false)
+        return { prop, value }
       case 2:
-        suffix = ['Vertical', 'Horizontal']
+        values.push(...values)
         break
       case 3:
-        suffix = ['Top', 'Horizontal', 'Bottom']
-        break
-      case 4:
-        suffix = ['Top', 'Right', 'Bottom', 'Left']
+        values.push(values[1])
         break
     }
-    return values.map((value, index) => {
-      const newProp = `${prop}${suffix[index] || ''}`
-      // validate
-      verifyValues({ prop: hump2dash(newProp), value, selector }, false)
-      return {
-        prop: newProp,
-        value: value
-      }
-    })
+    return formatAbbreviation({ prop, value: values, selector }, { mode })
   }
 
   // line-height
@@ -374,22 +366,6 @@ module.exports = function getSpec ({ warn, error }) {
     return false
   }
 
-  // border-radius 缩写转换
-  const getBorderRadius = ({ prop, value, selector }, { mode }) => {
-    const values = parseValues(value)
-    if (values.length === 1) {
-      verifyValues({ prop, value, selector }, false)
-      return { prop, value }
-    } else {
-      if (values.length === 2) {
-        values.push(...values)
-      } else if (values.length === 3) {
-        values.push(values[1])
-      }
-      return formatAbbreviation({ prop, value: values.join(' ') }, { mode })
-    }
-  }
-
   // transform 转换
   const formatTransform = ({ prop, value, selector }, { mode }) => {
     if (Array.isArray(value)) return { prop, value }
@@ -566,15 +542,10 @@ module.exports = function getSpec ({ warn, error }) {
         ios: checkBackgroundImage,
         android: checkBackgroundImage
       },
-      {
-        test: 'border-radius',
-        ios: getBorderRadius,
-        android: getBorderRadius
-      },
       { // margin padding 内外边距的处理
-        test: /^(margin|padding)$/,
-        ios: formatMargins,
-        android: formatMargins
+        test: /^(margin|padding|border-radius|border-width|border-color)$/,
+        ios: formatCompositeVal,
+        android: formatCompositeVal
       },
       { // line-height 换算
         test: 'line-height',

package/lib/react/processTemplate.js

@@ -27,7 +27,8 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
-    autoVirtualHostRules
+    autoVirtualHostRules,
+    customTextRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -84,7 +85,8 @@ module.exports = function (template, {
         globalComponents: [],
         // web模式下实现抽象组件
         componentGenerics,
-        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),
+        isCustomText: matchCondition(resourcePath, customTextRules)
       })
 
       if (meta.wxsContentMap) {

package/lib/runtime/components/react/context.ts

@@ -25,6 +25,12 @@ export interface FormContextValue {
   reset: () => void
 }
 
+export interface IntersectionObserver {
+  [key: number]: {
+    throttleMeasure: () => void
+  }
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -38,3 +44,5 @@ export const LabelContext = createContext<LabelContextValue | null>(null)
 export const PickerContext = createContext(null)
 
 export const VarContext = createContext({})
+
+export const IntersectionObserverContext = createContext<IntersectionObserver | null>(null)

package/lib/runtime/components/react/dist/context.js

@@ -6,3 +6,4 @@ export const RadioGroupContext = createContext(null);
 export const LabelContext = createContext(null);
 export const PickerContext = createContext(null);
 export const VarContext = createContext({});
+export const IntersectionObserverContext = createContext(null);

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

@@ -33,15 +33,16 @@
  */
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
-import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useRef, useState, useEffect, forwardRef, useContext } from 'react';
 import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils';
+import { IntersectionObserverContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
@@ -56,6 +57,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
+    const intersectionObservers = useContext(IntersectionObserverContext);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
@@ -173,6 +175,11 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 layoutRef
             }, props));
         updateScrollOptions(e, { scrollLeft, scrollTop });
+        if (enableTriggerIntersectionObserver && intersectionObservers) {
+            for (const key in intersectionObservers) {
+                intersectionObservers[key].throttleMeasure();
+            }
+        }
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -279,6 +286,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
+        'enable-trigger-intersection-observer',
         'paging-enabled',
         'show-scrollbar',
         'upper-threshold',

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

@@ -67,6 +67,8 @@ const _Carouse = forwardRef((props, ref) => {
     const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0);
     const defaultX = (defaultWidth * initOffsetIndex) || 0;
     const defaultY = (defaultHeight * initOffsetIndex) || 0;
+    // 主动scorllTo时是否要出发onScrollEnd
+    const needTriggerScrollEnd = useRef(true);
     // 内部存储上一次的offset值
     const autoplayTimerRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -77,22 +79,21 @@ const _Carouse = forwardRef((props, ref) => {
     // 内部存储上一次的偏移量
     const internalsRef = useRef({
         offset: {
-            x: defaultX || 0,
-            y: defaultY || 0
+            x: 0,
+            y: 0
         },
         isScrolling: false
     });
     const isDragRef = useRef(false);
     const [state, setState] = useState({
-        children: newChild,
         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,
         offset: {
-            x: dir === 'x' ? defaultX : 0,
-            y: dir === 'y' ? defaultY : 0
+            x: 0,
+            y: 0
         },
         dir
     });
@@ -113,25 +114,38 @@ const _Carouse = forwardRef((props, ref) => {
     }, [props.autoplay, props.current, state.index, state.width, state.height]);
     useEffect(() => {
         // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-        if (!props.autoplay && props.current !== state.index) {
+        if (!props.autoplay && props.current !== undefined && 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
-                };
-            });
+            const { nextIndex, nextOffset } = getMultiNextConfig(props.current);
+            // 1. 安卓需要主动更新下内部状态, 2. IOS不能触发完wcrollTo之后立即updateState, 会造成滑动两次
+            // 2. setTimeout 是fix 当再渲染过程中触发scrollTo失败的问题
+            if (Platform.OS === 'ios') {
+                needTriggerScrollEnd.current = false;
+                setTimeout(() => {
+                    scrollViewRef.current?.scrollTo({
+                        ...nextOffset,
+                        animated: true
+                    });
+                }, 50);
+            }
+            else {
+                updateState(nextIndex, nextOffset);
+            }
         }
-    }, [props.current]);
+    }, [props.current, state.width, state.height]);
+    function getMultiNextConfig(target) {
+        const step = state.dir === 'x' ? state.width : state.height;
+        const targetPos = step * props.current;
+        const targetOffset = {
+            x: dir === 'x' ? targetPos : 0,
+            y: dir === 'y' ? targetPos : 0
+        };
+        return {
+            nextIndex: target,
+            nextOffset: targetOffset
+        };
+    }
     /**
      * @desc: 更新状态: index和offset, 并响应索引变化的事件
      * scrollViewOffset: 移动到的目标位置
@@ -181,7 +195,6 @@ const _Carouse = forwardRef((props, ref) => {
             nextIndex = isBack ? nextIndex - 2 : nextIndex;
         }
         if (!props.circular) {
-            // nextIndex = isBack ? nextIndex - 2 : nextIndex
             nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex });
         }
         else {
@@ -230,13 +243,12 @@ const _Carouse = forwardRef((props, ref) => {
             createAutoPlay();
             return;
         }
-        if (!Array.isArray(state.children)) {
+        if (!Array.isArray(props.children)) {
             return;
         }
         const step = state.dir === 'x' ? state.width : state.height;
         const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset);
         // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
-        // 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 });
@@ -266,7 +278,6 @@ const _Carouse = forwardRef((props, ref) => {
                 // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
                 if (state.dir === 'x') {
                     scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true });
-                    // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
                 }
                 else {
                     scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true });
@@ -283,9 +294,15 @@ const _Carouse = forwardRef((props, ref) => {
     }
     /**
      * 当用户开始拖动结束
+     * 注意: 当手动调用scrollTo的时候, 安卓不会触发onMomentumScrollEnd, IOS会触发onMomentumScrollEnd
      */
     function onScrollEnd(event) {
-        // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+        if (Platform.OS === 'ios' && !needTriggerScrollEnd.current) {
+            const { nextIndex, nextOffset } = getMultiNextConfig(props.current);
+            updateState(nextIndex, nextOffset);
+            needTriggerScrollEnd.current = true;
+            return;
+        }
         if (totalElements === 1) {
             return;
         }
@@ -311,58 +328,41 @@ const _Carouse = forwardRef((props, ref) => {
      * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
     */
     function onWrapperLayout(e) {
-        if (hasSelfPercent) {
-            const { width, height } = e?.nativeEvent?.layout || {};
-            setWidth(width || 0);
-            setHeight(height || 0);
-        }
-        if (props.enableOffset) {
-            scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-                const isWDiff = state.width !== width;
-                const isHDiff = state.height !== height;
-                if (isWDiff || isHDiff) {
-                    const changeState = {
-                        width: isWDiff ? width : state.width,
-                        height: isHDiff ? height : state.height
+        scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            const isWDiff = state.width !== width;
+            const isHDiff = state.height !== height;
+            if (isWDiff || isHDiff) {
+                const changeState = {
+                    width: isWDiff ? width : state.width,
+                    height: isHDiff ? height : state.height
+                };
+                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.width = changeState.width;
+                state.height = changeState.height;
+                // 这里setState之后,会再触发重新渲染, renderScrollView会再次触发onScrollEnd,
+                setState((preState) => {
+                    return {
+                        ...preState,
+                        width: changeState.width,
+                        height: changeState.height
                     };
-                    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 = changeState.width;
-                    state.height = changeState.height;
-                    setState((preState) => {
-                        return {
-                            ...preState,
-                            offset: correctOffset,
-                            width: changeState.width,
-                            height: changeState.height
-                        };
-                    });
-                    scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false });
-                }
-                props.getInnerLayout && props.getInnerLayout(layoutRef);
-            });
-        }
+                });
+            }
+            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);
-            }
+        for (let i = 0; i < totalElements; i++) {
+            offsetArray.push(i * step);
         }
         return offsetArray;
     }
@@ -371,7 +371,7 @@ const _Carouse = forwardRef((props, ref) => {
         const scrollElementProps = {
             ref: scrollViewRef,
             horizontal: props.horizontal,
-            pagingEnabled: false,
+            pagingEnabled: true,
             snapToOffsets: offsetsArray,
             decelerationRate: 0.99,
             showsHorizontalScrollIndicator: false,
@@ -423,20 +423,21 @@ const _Carouse = forwardRef((props, ref) => {
       </View>);
     }
     function renderPages() {
-        const { width, height, total, children } = state;
+        const { width, height } = state;
+        const { children } = props;
         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)) {
+        if (totalElements > 1 && Array.isArray(children)) {
             let arrElements = [];
             // pages = ["2", "0", "1", "2", "0"]
             const pages = Array.isArray(children) ? Object.keys(children) : [];
             /* 无限循环的时候 */
             if (circular) {
-                pages.unshift(total - 1 + '');
+                pages.unshift(totalElements - 1 + '');
                 pages.push('0');
             }
             arrElements = pages.map((page, i) => {
@@ -447,7 +448,6 @@ const _Carouse = forwardRef((props, ref) => {
                 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]

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

@@ -7,6 +7,8 @@
 import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
+import Animated from 'react-native-reanimated';
+import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils';
 import LinearGradient from 'react-native-linear-gradient';
@@ -527,7 +529,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 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;
+    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, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = {
@@ -592,9 +594,10 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
+        style: viewStyle,
         ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
@@ -608,15 +611,31 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      {wrapWithChildren(props, {
-            hasVarDec,
-            enableBackground: enableBackgroundRef.current,
-            textStyle,
-            backgroundStyle,
-            varContext: varContextRef.current,
-            textProps
-        })}
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimation
+        ? useAnimationHooks({
+            animation,
+            style: viewStyle
+        })
+        : viewStyle;
+    const childNode = wrapWithChildren(props, {
+        hasVarDec,
+        enableBackground: enableBackgroundRef.current,
+        textStyle,
+        backgroundStyle,
+        varContext: varContextRef.current,
+        textProps
+    });
+    return animation?.actions?.length
+        ? (<Animated.View {...innerProps} style={finalStyle}>
+      {childNode}
+    </Animated.View>)
+        : (<View {...innerProps}>
+      {childNode}
     </View>);
 });
 _View.displayName = 'mpx-view';

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

@@ -6,7 +6,7 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 const _WebView = forwardRef((props, ref) => {
-    const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }