@mpxjs/webpack-plugin 2.10.4-beta.2 → 2.10.4-beta.20

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
+    pad: 'line',
     env
   })
   if (needMap) {

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

@@ -354,7 +354,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'preloadRule',
-        tt: deletePath(),
         jd: deletePath()
       },
       {

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

@@ -184,8 +184,9 @@ module.exports = function getSpec ({ warn, error }) {
     'border-top': ['borderTopWidth', 'borderTopStyle', 'borderTopColor'],
     // 仅支持 width | style | color 这种排序
     'border-bottom': ['borderBottomWidth', 'borderBottomStyle', 'borderBottomColor'],
+    // 0.76 及以上版本RN支持 box-shadow，实测0.77版本drn红米note12pro Android12 不支持内阴影，其他表现和web一致
     // 仅支持 offset-x | offset-y | blur-radius | color 排序
-    'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
+    // 'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
     // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
     'text-decoration': ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor'],
     // flex-grow | flex-shrink | flex-basis
@@ -525,20 +526,20 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
-    value = value.trim()
-    if (value === 'none') {
-      return false
-    }
-    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
-    if (mode === 'android' || mode === 'harmony') return cssMap
-    // ios 阴影需要额外设置 shadowOpacity=1
-    cssMap.push({
-      prop: 'shadowOpacity',
-      value: 1
-    })
-    return cssMap
-  }
+  // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
+  //   value = value.trim()
+  //   if (value === 'none') {
+  //     return false
+  //   }
+  //   const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
+  //   if (mode === 'android' || mode === 'harmony') return cssMap
+  //   // ios 阴影需要额外设置 shadowOpacity=1
+  //   cssMap.push({
+  //     prop: 'shadowOpacity',
+  //     value: 1
+  //   })
+  //   return cssMap
+  // }
 
   return {
     supportedModes: ['ios', 'android', 'harmony'],
@@ -579,12 +580,12 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'box-shadow',
-        ios: formatBoxShadow,
-        android: formatBoxShadow,
-        harmony: formatBoxShadow
-      },
+      // {
+      //   test: 'box-shadow',
+      //   ios: formatBoxShadow,
+      //   android: formatBoxShadow,
+      //   harmony: formatBoxShadow
+      // },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),

package/lib/platform/template/wx/component-config/button.js

@@ -124,7 +124,7 @@ module.exports = function ({ print }) {
           if (isMustache(value)) {
             ttValueLog({ name, value })
           } else {
-            const supportList = ['share', 'getPhoneNumber', 'contact', 'im', 'openSetting']
+            const supportList = ['share', 'getPhoneNumber', 'contact', 'im', 'openSetting', 'addShortcut']
             if (value && supportList.indexOf(value) === -1) {
               ttValueLogError({ name, value })
             }

package/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,8 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +127,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }

package/lib/platform/template/wx/component-config/input.js

@@ -51,7 +51,7 @@ module.exports = function ({ print }) {
         swan: baiduPropLog
       },
       {
-        test: /^(placeholder-class|auto-focus|confirm-type|confirm-hold|adjust-position|hold-keyboard)$/,
+        test: /^(auto-focus|confirm-type|confirm-hold|adjust-position|hold-keyboard)$/,
         tt: ttPropLog
       },
       {

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    }
+  }
+}

package/lib/react/processJSON.js

@@ -113,13 +113,14 @@ module.exports = function (jsonContent, {
   }
 
   if (ctorType === 'page') {
-    const keysToExtract = ['navigationStyle']
+    // const keysToExtract = ['navigationStyle']
     const configObj = {}
-    keysToExtract.forEach(key => {
-      if (jsonObj[key]) {
-        configObj[key] = jsonObj[key]
-      }
-    })
+    // 暂时先不注入数据，后续如需要使用再用
+    // keysToExtract.forEach(key => {
+    //   if (jsonObj[key]) {
+    //     configObj[key] = jsonObj[key]
+    //   }
+    // })
     loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
   }
 

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

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

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

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

package/lib/runtime/components/react/dist/event.config.js

@@ -1,5 +1,3 @@
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
-export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },

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

@@ -1,21 +1,22 @@
 import { useRef, useMemo } from 'react';
-import { hasOwn, collectDataset } from '@mpxjs/utils';
+import { collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
-import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config';
+import eventConfigMap from './event.config';
 const globalEventState = {
     needPress: true
 };
-const getTouchEvent = (type, event, props, config, navigation) => {
+const getTouchEvent = (type, event, config) => {
+    const { navigation, propsRef, layoutRef } = config;
+    const props = propsRef.current;
     const { y: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
-    const { layoutRef } = config;
     const currentTarget = extendObject({}, event.currentTarget, {
         id: id || '',
         dataset: collectDataset(props),
-        offsetLeft: layoutRef?.current?.offsetLeft || 0,
-        offsetTop: layoutRef?.current?.offsetTop || 0
+        offsetLeft: layoutRef.current?.offsetLeft || 0,
+        offsetTop: layoutRef.current?.offsetTop || 0
     });
     const pendingProps = event._targetInst?.pendingProps || {};
     const target = extendObject({}, event.target, {
@@ -70,150 +71,107 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
         preventDefault: oe.preventDefault
     });
 };
-function handleEmitEvent(events, type, oe, propsRef, config, navigation) {
-    events.forEach((event) => {
-        if (propsRef.current[event]) {
-            const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
-            // 检查是否已经被上层的 catch 阻止
-            if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
-                return;
-            }
-            if (match) {
-                const eventBase = match[2] || '';
-                if (eventBase === 'tap' || eventBase === 'longpress') {
-                    // 为 tap、longpress 添加标记，影响后续的冒泡
-                    if (!oe._stoppedEventTypes) {
-                        oe._stoppedEventTypes = new Set();
-                    }
-                    oe._stoppedEventTypes.add(eventBase);
-                }
-                else {
-                    // 原生 touch 事件使用 stopPropagation
-                    oe.stopPropagation();
-                }
-            }
-            propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
+function handleEmitEvent(name, e, type, eventConfig) {
+    const { propsRef } = eventConfig;
+    const eventCfg = eventConfig[name];
+    if (eventCfg) {
+        if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
+            e.stopPropagation();
         }
-    });
+        eventCfg[type].forEach((event) => {
+            propsRef.current[event]?.(getTouchEvent(name, e, eventConfig));
+        });
+    }
 }
 function checkIsNeedPress(e, type, ref) {
     const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
-    const nativeEvent = e.nativeEvent;
-    const currentPageX = nativeEvent.changedTouches[0].pageX;
-    const currentPageY = nativeEvent.changedTouches[0].pageY;
+    const currentPageX = e.nativeEvent.changedTouches[0].pageX;
+    const currentPageY = e.nativeEvent.changedTouches[0].pageY;
     if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
         Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         globalEventState.needPress = false;
-        ref.current.startTimer[type] &&
-            clearTimeout(ref.current.startTimer[type]);
+        ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
         ref.current.startTimer[type] = null;
     }
 }
-function handleTouchstart(e, type, ref, propsRef, config, navigation) {
+function handleTouchstart(e, type, eventConfig) {
+    // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
     e.persist();
-    const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
-    const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
-    const captureTouchEvent = [
-        'capture-catchtouchstart',
-        'capture-bindtouchstart'
-    ];
-    const capturePressEvent = [
-        'capture-catchlongpress',
-        'capture-bindlongpress'
-    ];
-    ref.current.startTimer[type] = null;
+    const { innerRef } = eventConfig;
     globalEventState.needPress = true;
-    const nativeEvent = e.nativeEvent;
-    ref.current.mpxPressInfo.detail = {
-        x: nativeEvent.changedTouches[0].pageX,
-        y: nativeEvent.changedTouches[0].pageY
+    innerRef.current.mpxPressInfo.detail = {
+        x: e.nativeEvent.changedTouches[0].pageX,
+        y: e.nativeEvent.changedTouches[0].pageY
     };
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
-    if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
-        ref.current.startTimer[type] = setTimeout(() => {
+    handleEmitEvent('touchstart', e, type, eventConfig);
+    if (eventConfig.longpress) {
+        if (e._stoppedEventTypes?.has('longpress')) {
+            return;
+        }
+        if (eventConfig.longpress.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('longpress');
+        }
+        innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+        innerRef.current.startTimer[type] = setTimeout(() => {
             // 只要触发过longpress, 全局就不再触发tap
             globalEventState.needPress = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
+            handleEmitEvent('longpress', e, type, eventConfig);
         }, 350);
     }
 }
-function handleTouchmove(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
-    const captureTouchEvent = [
-        'capture-catchtouchmove',
-        'capture-bindtouchmove'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
+function handleTouchmove(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchmove', e, type, eventConfig);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
     }
 }
-function handleTouchend(e, type, ref, propsRef, config, navigation) {
-    // move event may not be triggered
-    if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
-        checkIsNeedPress(e, type, ref);
-    }
-    const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
-    const bubbleTapEvent = ['catchtap', 'bindtap'];
-    const captureTouchEvent = [
-        'capture-catchtouchend',
-        'capture-bindtouchend'
-    ];
-    const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
-    if (globalEventState.needPress) {
-        if (type === 'bubble' && config.disableTap) {
+function handleTouchend(e, type, eventConfig) {
+    const { innerRef, disableTap } = eventConfig;
+    handleEmitEvent('touchend', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
+    if (eventConfig.tap) {
+        checkIsNeedPress(e, type, innerRef);
+        if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
             return;
         }
-        handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
+        if (eventConfig.tap.hasCatch) {
+            e._stoppedEventTypes = e._stoppedEventTypes || new Set();
+            e._stoppedEventTypes.add('tap');
+        }
+        handleEmitEvent('tap', e, type, eventConfig);
     }
 }
-function handleTouchcancel(e, type, ref, propsRef, config, navigation) {
-    const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
-    const captureTouchEvent = [
-        'capture-catchtouchcancel',
-        'capture-bindtouchcancel'
-    ];
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    ref.current.startTimer[type] &&
-        clearTimeout(ref.current.startTimer[type]);
-    ref.current.startTimer[type] = null;
-    handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
+function handleTouchcancel(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchcancel', e, type, eventConfig);
+    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
 }
-function createTouchEventHandler(eventName, type) {
-    return (e, ref, propsRef, config, navigation) => {
-        const handlerMap = {
+function createTouchEventHandler(eventName, eventConfig) {
+    return (e) => {
+        const bubbleHandlerMap = {
             onTouchStart: handleTouchstart,
             onTouchMove: handleTouchmove,
             onTouchEnd: handleTouchend,
             onTouchCancel: handleTouchcancel
         };
-        const handler = handlerMap[eventName];
-        if (handler) {
-            handler(e, type, ref, propsRef, config, navigation);
+        const captureHandlerMap = {
+            onTouchStartCapture: handleTouchstart,
+            onTouchMoveCapture: handleTouchmove,
+            onTouchEndCapture: handleTouchend,
+            onTouchCancelCapture: handleTouchcancel
+        };
+        if (bubbleHandlerMap[eventName]) {
+            bubbleHandlerMap[eventName](e, 'bubble', eventConfig);
+        }
+        if (captureHandlerMap[eventName]) {
+            captureHandlerMap[eventName](e, 'capture', eventConfig);
         }
     };
 }
-const touchEventList = [
-    { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
-    { eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
-    { eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
-    { eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
-    { eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
-    { eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
-    { eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
-    { eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
-];
-const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
-    const ref = useRef({
+const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
+    const innerRef = useRef({
         startTimer: {
             bubble: null,
             capture: null
@@ -226,52 +184,68 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
         }
     });
     const propsRef = useRef({});
-    const eventConfig = {};
-    const config = rawConfig || {
-        layoutRef: { current: {} },
-        disableTap: false
-    };
+    propsRef.current = props;
     const navigation = useNavigation();
-    const removeProps = [
-        'children',
-        'enable-background',
-        'enable-offset',
-        'enable-var',
-        'external-var-context',
-        'parent-font-size',
-        'parent-width',
-        'parent-height',
-        ...userRemoveProps
-    ];
-    propsRef.current = extendObject({}, props, additionalProps);
+    const eventConfig = extendObject({
+        layoutRef: {
+            current: null
+        },
+        propsRef,
+        innerRef,
+        disableTap: false,
+        navigation
+    }, rawConfig);
     let hashEventKey = '';
     const rawEventKeys = [];
-    for (const key in eventConfigMap) {
-        if (hasOwn(propsRef.current, key)) {
-            eventConfig[key] = eventConfigMap[key].events;
-            hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
+    const transformedEventSet = new Set();
+    Object.keys(props).forEach((key) => {
+        if (eventConfigMap[key]) {
+            hashEventKey += eventConfigMap[key].bitFlag;
             rawEventKeys.push(key);
+            eventConfigMap[key].events.forEach((event) => {
+                transformedEventSet.add(event);
+            });
+            const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key);
+            const prefix = match[1];
+            const eventName = match[2];
+            eventConfig[eventName] = eventConfig[eventName] || {
+                bubble: [],
+                capture: [],
+                hasCatch: false
+            };
+            if (prefix === 'bind' || prefix === 'catch') {
+                eventConfig[eventName].bubble.push(key);
+            }
+            else {
+                eventConfig[eventName].capture.push(key);
+            }
+            if (prefix === 'catch' || prefix === 'capture-catch') {
+                eventConfig[eventName].hasCatch = true;
+            }
         }
-    }
+    });
     const events = useMemo(() => {
-        if (!rawEventKeys.length) {
+        if (!hashEventKey) {
             return {};
         }
-        const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
-            if (propsRef.current[key]) {
-                return acc.concat(eventConfig[key]);
-            }
-            return acc;
-        }, []);
-        const finalEventKeys = [...new Set(transformedEventKeys)];
         const events = {};
-        touchEventList.forEach((item) => {
-            if (finalEventKeys.includes(item.eventName)) {
-                events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
-            }
-        });
+        for (const eventName of transformedEventSet) {
+            events[eventName] = createTouchEventHandler(eventName, eventConfig);
+        }
         return events;
     }, [hashEventKey]);
-    return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
+    const removeProps = [
+        'children',
+        'enable-background',
+        'enable-offset',
+        'enable-var',
+        'external-var-context',
+        'parent-font-size',
+        'parent-width',
+        'parent-height',
+        ...userRemoveProps,
+        ...rawEventKeys
+    ];
+    return extendObject({}, events, omit(props, removeProps));
 };
 export default useInnerProps;

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

@@ -35,7 +35,7 @@
  * ✔ bindtap
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
@@ -103,7 +103,7 @@ const timer = (data, time = 3000) => new Promise((resolve) => {
     }, time);
 });
 const Loading = ({ alone = false }) => {
-    const image = useRef(new Animated.Value(0)).current;
+    const image = useAnimatedValue(0);
     const rotate = image.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg']
@@ -236,10 +236,9 @@ const Button = forwardRef((buttonProps, ref) => {
         handleOpenTypeEvent(evt);
         handleFormTypeFn();
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, innerStyle, layoutStyle)
-    }, layoutProps, {
+        style: extendObject({}, innerStyle, layoutStyle),
         bindtap: !disabled && onTap
     }), [
         'disabled',