@mpxjs/webpack-plugin 2.9.66 → 2.9.67

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

@@ -31,5 +31,5 @@ const _Navigator = forwardRef((props, ref) => {
       {children}
     </MpxView>);
 });
-_Navigator.displayName = 'mpx-navigator';
+_Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -1,7 +1,7 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
@@ -9,7 +9,9 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren } from './utils';
 const radioGroup = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange } = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const propsRef = useRef({});
+    propsRef.current = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -28,16 +30,13 @@ const radioGroup = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const getSelectionValue = () => {
+    const getValue = () => {
         for (const key in groupValue) {
             if (groupValue[key].checked) {
                 return key;
             }
         }
     };
-    const getValue = () => {
-        return getSelectionValue();
-    };
     const resetValue = () => {
         Object.keys(groupValue).forEach((key) => {
             groupValue[key].checked = false;
@@ -52,15 +51,29 @@ const radioGroup = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const notifyChange = (evt) => {
-        bindchange &&
-            bindchange(getCustomEvent('tap', evt, {
-                layoutRef,
-                detail: {
-                    value: getSelectionValue()
-                }
-            }, props));
-    };
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -69,7 +82,7 @@ const radioGroup = forwardRef((props, ref) => {
         layoutRef
     });
     return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+      <RadioGroupContext.Provider value={contextValue}>
         {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current
@@ -77,5 +90,5 @@ const radioGroup = forwardRef((props, ref) => {
       </RadioGroupContext.Provider>
     </View>);
 });
-radioGroup.displayName = 'mpx-radio-group';
+radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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

@@ -151,5 +151,5 @@ const Radio = forwardRef((radioProps, ref) => {
         })}
       </View>);
 });
-Radio.displayName = 'mpx-radio';
+Radio.displayName = 'MpxRadio';
 export default Radio;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -11,5 +11,5 @@ const _RootPortal = (props) => {
     </Portal>
         : <>{children}</>;
 };
-_RootPortal.displayName = 'mpx-root-portal';
+_RootPortal.displayName = 'MpxRootPortal';
 export default _RootPortal;

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

@@ -5,7 +5,7 @@
  * ✔ lower-threshold
  * ✔ scroll-top
  * ✔ scroll-left
- * ✘ scroll-into-view
+ * ✔ scroll-into-view
  * ✔ scroll-with-animation
  * ✔ enable-back-to-top
  * ✘ enable-passive
@@ -38,11 +38,13 @@ 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 { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture } 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, '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 { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, '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, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
@@ -58,6 +60,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
+    const snapScrollIntoView = useRef('');
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
@@ -71,30 +74,42 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             fastDeceleration: false,
             decelerationDisabled: false,
             scrollTo: scrollToOffset
-        }
+        },
+        gestureRef: scrollViewRef
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
     }
     useEffect(() => {
-        if (snapScrollTop.current !== props['scroll-top'] ||
-            snapScrollLeft.current !== props['scroll-left']) {
-            snapScrollTop.current = props['scroll-top'] || 0;
-            snapScrollLeft.current = props['scroll-left'] || 0;
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
             initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+                scrollToOffset(scrollLeft, scrollTop);
             }, 0);
             return () => {
                 initialTimeout.current && clearTimeout(initialTimeout.current);
             };
         }
-    }, [props['scroll-top'], props['scroll-left']]);
+    }, [scrollTop, scrollLeft]);
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
     useEffect(() => {
-        if (refreshing !== props['refresher-triggered']) {
-            setRefreshing(!!props['refresher-triggered']);
+        if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
+            snapScrollIntoView.current = scrollIntoView || '';
+            setTimeout(() => {
+                const refs = __selectRef(`#${scrollIntoView}`, 'node');
+                if (refs) {
+                    const { nodeRef } = refs.getNodeInstance();
+                    nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+                        scrollToOffset(left, top);
+                    });
+                }
+            });
         }
-    }, [props['refresher-triggered']]);
+    }, [scrollIntoView]);
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -204,6 +219,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
         }
     }
     function onRefresh() {
@@ -212,7 +229,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
     }
     function onScrollTouchStart(e) {
-        const { binddragstart, bindtouchstart, enhanced } = props;
+        const { bindtouchstart } = props;
         bindtouchstart && bindtouchstart(e);
         if (enhanced) {
             binddragstart &&
@@ -226,7 +243,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onScrollTouchMove(e) {
-        const { binddragging, bindtouchmove, enhanced } = props;
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
             binddragging &&
@@ -239,24 +255,23 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollEndDrag(e) {
-        const { binddragend, enhanced } = props;
+    function onScrollTouchEnd(e) {
+        bindtouchend && bindtouchend(e);
         if (enhanced) {
-            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollLeft,
-                        scrollTop: scrollTop,
-                        scrollHeight,
-                        scrollWidth
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
-            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
+    function onScrollDrag(e) {
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
     let scrollAdditionalProps = {
         style: { ...innerStyle, ...layoutStyle },
         pinchGestureEnabled: false,
@@ -269,11 +284,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: onScrollTouchStart,
-        bindtouchmove: onScrollTouchMove,
-        onScrollEndDrag,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+        onScrollBeginDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDrag,
         onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps
+        ...layoutProps,
+        ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
+        ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
     };
     if (enhanced) {
         scrollAdditionalProps = {
@@ -283,6 +302,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         };
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'id',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
@@ -323,5 +343,5 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         })}
     </ScrollView>);
 });
-_ScrollView.displayName = 'mpx-scroll-view';
+_ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

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

@@ -474,5 +474,5 @@ const _Carouse = forwardRef((props, ref) => {
       {props.showsPagination && renderPagination()}
   </View>);
 });
-_Carouse.displayName = '_Carouse';
+_Carouse.displayName = 'MpxCarouse';
 export default _Carouse;

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

@@ -64,5 +64,5 @@ const _SwiperWrapper = forwardRef((props, ref) => {
     {children}
   </Carouse>;
 });
-_SwiperWrapper.displayName = 'mpx-swiper';
+_SwiperWrapper.displayName = 'MpxSwiper';
 export default _SwiperWrapper;

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

@@ -30,5 +30,5 @@ const _SwiperItem = forwardRef((props, ref) => {
         })}
     </View>);
 });
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;

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

@@ -58,6 +58,13 @@ const _Switch = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -76,5 +83,5 @@ const _Switch = forwardRef((props, ref) => {
     }
     return <Switch {...innerProps} style={normalStyle} value={isChecked} trackColor={{ false: '#FFF', true: color }} thumbColor={isChecked ? '#FFF' : '#f4f3f4'} ios_backgroundColor="#FFF"/>;
 });
-_Switch.displayName = 'mpx-switch';
+_Switch.displayName = 'MpxSwitch';
 export default _Switch;

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

@@ -36,5 +36,5 @@ const _Text = forwardRef((props, ref) => {
         })}
     </Text>);
 });
-_Text.displayName = 'mpx-text';
+_Text.displayName = 'MpxText';
 export default _Text;

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

@@ -23,5 +23,5 @@ const Textarea = forwardRef((props, ref) => {
     ]);
     return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
 });
-Textarea.displayName = 'mpx-textarea';
+Textarea.displayName = 'MpxTextarea';
 export default Textarea;

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

@@ -638,5 +638,5 @@ const _View = forwardRef((viewProps, ref) => {
       {childNode}
     </View>);
 });
-_View.displayName = 'mpx-view';
+_View.displayName = 'MpxView';
 export default _View;

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

@@ -109,5 +109,5 @@ const _WebView = forwardRef((props, ref) => {
     <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
   </Portal>);
 });
-_WebView.displayName = 'mpx-web-view';
+_WebView.displayName = 'MpxWebview';
 export default _WebView;

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

@@ -45,19 +45,79 @@ const InitialValue = Object.assign({
     transformOrigin: ['50%', '50%', 0]
 }, TransformInitial);
 const TransformOrigin = 'transformOrigin';
-// deg 角度
-// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
-// 背景色
-// const isBg = (key: RuleKey) => key === 'backgroundColor'
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr) => {
+    const values = transformStr.trim().split(/\s+/);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                case 'matrix3d':
+                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'rotate3d': // x y z angle
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+};
+// format style
+const formatStyle = (style) => {
+    if (!style.transform || Array.isArray(style.transform))
+        return style;
+    return Object.assign({}, style, {
+        transform: parseTransform(style.transform)
+    });
+};
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation } = props;
+    const { style = {}, animation } = props;
+    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
     const animatedStyleKeys = useSharedValue([]);
+    // 记录动画key的style样式值 没有的话设置为false
     const animatedKeys = useRef({});
+    // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -80,6 +140,16 @@ export default function useAnimationHooks(props) {
         // 驱动动画
         createAnimation(keys);
     }, [id]);
+    // 同步style更新
+    // useEffect(() => {
+    //   Object.keys(animatedKeys.current).forEach(key => {
+    //     const originVal = getOriginalStyleVal(key, isTransform(key))
+    //     if (originVal && animatedKeys.current[key] !== originVal) {
+    //       animatedKeys.current[key] = originVal
+    //       shareValMap[key].value = originVal
+    //     }
+    //   })
+    // }, [style])
     // ** 清空动画
     useEffect(() => {
         return () => {
@@ -115,7 +185,7 @@ export default function useAnimationHooks(props) {
             animatedKeys.forEach(key => {
                 let toVal = (rules.get(key) || transform.get(key));
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (!toVal) {
+                if (toVal === undefined) {
                     toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
                 }
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
@@ -143,9 +213,8 @@ export default function useAnimationHooks(props) {
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }
-    // 获取初始值（prop style or 默认值）
     function getInitialVal(key, isTransform = false) {
-        if (isTransform && originalStyle.transform?.length) {
+        if (isTransform && Array.isArray(originalStyle.transform)) {
             let initialVal = InitialValue[key];
             // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
             originalStyle.transform.forEach(item => {
@@ -156,12 +225,31 @@ export default function useAnimationHooks(props) {
         }
         return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
     }
+    // 从 prop style 中获取样式初始值 没有为undefined
+    // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   if (isTransform && Array.isArray(originalStyle.transform)) {
+    //     let initialVal = undefined // InitialValue[key]
+    //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+    //     originalStyle.transform.forEach(item => {
+    //       if (item[key] !== undefined) initialVal = item[key]
+    //     })
+    //     return initialVal
+    //   }
+    //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+    // }
+    // 获取动画shareVal初始值（prop style or 默认值）
+    // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   const originalVal = getOriginalStyleVal(key, isTransform)
+    //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+    // }
     // 循环 animation actions 获取所有有动画的 style prop name
     function getAnimatedStyleKeys() {
         return (animation?.actions || []).reduce((keyMap, action) => {
             const { rules, transform } = action;
             const ruleArr = [...rules.keys(), ...transform.keys()];
             ruleArr.forEach(key => {
+                // const originalVal = getOriginalStyleVal(key, isTransform(key))
+                // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
                 if (!keyMap[key])
                     keyMap[key] = true;
             });

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

@@ -9,7 +9,7 @@ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
 export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
 export const DEFAULT_FONT_SIZE = 16;
-export const DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
     opacity: 0
 };
 const varDecRegExp = /^--.*/;
@@ -88,7 +88,7 @@ export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText;
+        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -402,7 +402,7 @@ export function splitProps(props) {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }) => {
     const layoutRef = useRef({});
     const hasLayoutRef = useRef(false);
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {};
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -444,3 +444,12 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export function flatGesture(gestures = []) {
+    return (gestures && gestures.flatMap((gesture) => {
+        if (gesture && gesture.nodeRefs) {
+            return gesture.nodeRefs
+                .map((item) => item.getNodeInstance()?.instance?.gestureRef || {});
+        }
+        return gesture?.current ? [gesture] : [];
+    })) || [];
+}

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

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+import { NativeSyntheticEvent } from 'react-native'
 import { omit } from './utils'
 import eventConfigMap from './event.config'
 import {

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

@@ -408,6 +408,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 })
 
-Button.displayName = 'mpx-button'
+Button.displayName = 'MpxButton'
 
 export default Button