@mpxjs/webpack-plugin 2.10.3-beta.16 → 2.10.3-beta.18

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,7 @@ 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 });
+export const ProviderContext = createContext(null);

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

@@ -1,4 +1,3 @@
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
 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,23 @@
 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 } from './event.config';
+import eventConfigMap from './event.config';
 const globalEventState = {
-    needPress: true
+    needPress: true,
+    identifier: null
 };
-const getTouchEvent = (type, event, props, config, navigation) => {
-    const { y: navigationY = 0 } = navigation?.layout || {};
+const getTouchEvent = (type, event, config) => {
+    const { navigation, propsRef, layoutRef } = config;
+    const props = propsRef.current;
+    const { top: 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,139 +72,120 @@ 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);
-            if (match) {
-                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 shouldHandleTapEvent(e, eventConfig) {
+    const { identifier } = e.nativeEvent.changedTouches[0];
+    return eventConfig.tap && globalEventState.identifier === identifier;
+}
+function handleTouchstart(e, type, eventConfig) {
     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;
-    globalEventState.needPress = true;
-    const nativeEvent = e.nativeEvent;
-    ref.current.mpxPressInfo.detail = {
-        x: nativeEvent.changedTouches[0].pageX,
-        y: nativeEvent.changedTouches[0].pageY
-    };
-    const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
-    const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
-    handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
-    const { catchlongpress, bindlongpress, 'capture-catchlongpress': captureCatchlongpress, 'capture-bindlongpress': captureBindlongpress } = propsRef.current;
-    if (catchlongpress ||
-        bindlongpress ||
-        captureCatchlongpress ||
-        captureBindlongpress) {
-        ref.current.startTimer[type] = setTimeout(() => {
-            // 只要触发过longpress, 全局就不再触发tap
-            globalEventState.needPress = false;
-            handleEmitEvent(currentPressEvent, 'longpress', e, propsRef, config, navigation);
-        }, 350);
+    const { innerRef } = eventConfig;
+    const touch = e.nativeEvent.changedTouches[0];
+    const { identifier } = touch;
+    const isSingle = e.nativeEvent.touches.length <= 1;
+    if (isSingle) {
+        // 仅在 touchstart 记录第一个单指触摸点
+        globalEventState.identifier = identifier;
+        globalEventState.needPress = true;
+        innerRef.current.mpxPressInfo.detail = {
+            x: touch.pageX,
+            y: touch.pageY
+        };
     }
-}
-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);
+    handleEmitEvent('touchstart', e, type, eventConfig);
+    if (eventConfig.longpress) {
+        // 只有单指触摸时才启动长按定时器
+        if (isSingle) {
+            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(() => {
+                globalEventState.needPress = false;
+                handleEmitEvent('longpress', e, type, eventConfig);
+            }, 350);
+        }
     }
 }
-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);
+function handleTouchmove(e, type, eventConfig) {
+    const { innerRef } = eventConfig;
+    handleEmitEvent('touchmove', e, type, eventConfig);
+    if (shouldHandleTapEvent(e, eventConfig)) {
+        checkIsNeedPress(e, type, innerRef);
     }
-    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]);
+    // 只有单指触摸结束时才触发 tap
+    if (shouldHandleTapEvent(e, eventConfig)) {
+        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
@@ -215,52 +198,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-async-suspense.jsx

@@ -0,0 +1,145 @@
+import { useState, useEffect, useCallback, useRef, createElement } from 'react';
+import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
+const asyncChunkMap = new Map();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#fff'
+    },
+    loadingImage: {
+        width: 100,
+        height: 100,
+        marginTop: 220,
+        alignSelf: 'center'
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    },
+    errorImage: {
+        marginTop: 80,
+        width: 220,
+        aspectRatio: 1,
+        alignSelf: 'center'
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        color: '#333',
+        marginBottom: 20
+    },
+    retryButton: {
+        position: 'absolute',
+        bottom: 54,
+        left: 20,
+        right: 20,
+        backgroundColor: '#fff',
+        paddingVertical: 15,
+        borderRadius: 30,
+        marginTop: 40,
+        borderWidth: 1,
+        borderColor: '#FF5F00'
+    },
+    retryButtonText: {
+        color: '#FF5F00',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    }
+});
+const DefaultFallback = ({ onReload }) => {
+    return (<View style={styles.container}>
+      <Image source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png'
+        }} style={styles.errorImage} resizeMode="contain"/>
+      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
+      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>);
+};
+const DefaultLoading = () => {
+    return (<View style={styles.container}>
+      <FastImage style={styles.loadingImage} source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'
+        }} resizeMode={FastImage.resizeMode.contain}></FastImage>
+    </View>);
+};
+const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getFallback, getChildren }) => {
+    const [status, setStatus] = useState('pending');
+    const chunkLoaded = asyncChunkMap.has(moduleId);
+    const loadChunkPromise = useRef(null);
+    const reloadPage = useCallback(() => {
+        setStatus('pending');
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        if (!chunkLoaded && status === 'pending') {
+            if (loadChunkPromise.current) {
+                loadChunkPromise
+                    .current.then((res) => {
+                    if (cancelled)
+                        return;
+                    asyncChunkMap.set(moduleId, res);
+                    setStatus('loaded');
+                })
+                    .catch((e) => {
+                    if (cancelled)
+                        return;
+                    if (type === 'component') {
+                        global.__mpxAppCbs.lazyLoad.forEach((cb) => {
+                            // eslint-disable-next-line node/no-callback-literal
+                            cb({
+                                type: 'subpackage',
+                                subpackage: [chunkName],
+                                errMsg: `loadSubpackage: ${e.type}`
+                            });
+                        });
+                    }
+                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.onLazyLoadPageError === 'function') {
+                        mpxGlobal.__mpx.config.rnConfig.onLazyLoadPageError({
+                            subpackage: chunkName,
+                            errType: e.type
+                        });
+                    }
+                    loadChunkPromise.current = null;
+                    setStatus('error');
+                });
+            }
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [status]);
+    if (chunkLoaded) {
+        const Comp = asyncChunkMap.get(moduleId);
+        return createElement(Comp, innerProps);
+    }
+    else if (status === 'error') {
+        if (type === 'page') {
+            const fallback = getFallback ? getFallback() : DefaultFallback;
+            return createElement(fallback, { onReload: reloadPage });
+        }
+        else {
+            return getFallback ? createElement(getFallback(), innerProps) : null;
+        }
+    }
+    else {
+        if (!loadChunkPromise.current) {
+            loadChunkPromise.current = getChildren();
+        }
+        if (type === 'page') {
+            const loading = getLoading ? getLoading() : DefaultLoading;
+            return createElement(loading);
+        }
+        else {
+            return getFallback ? createElement(getFallback(), innerProps) : null;
+        }
+    }
+};
+AsyncSuspense.displayName = 'MpxAsyncSuspense';
+export default AsyncSuspense;

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

@@ -35,13 +35,14 @@
  * ✔ 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';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
+import Portal from './mpx-portal';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
@@ -103,7 +104,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']
@@ -167,7 +168,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -236,10 +237,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',
@@ -263,9 +263,13 @@ const Button = forwardRef((buttonProps, ref) => {
         textStyle,
         textProps
     }));
-    return enableHover
+    const finalComponent = enableHover
         ? createElement(GestureDetector, { gesture: gesture }, baseButton)
         : baseButton;
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Button.displayName = 'MpxButton';
 export default Button;

package/lib/runtime/components/react/dist/mpx-canvas/Image.js

@@ -1,4 +1,5 @@
 import { WEBVIEW_TARGET, registerWebviewProperties } from './utils';
+import { extendObject } from '../utils';
 const PROPERTIES = {
     crossOrigin: undefined,
     height: undefined,
@@ -50,10 +51,7 @@ export class Image {
                         this[key] = value;
                     }
                 }
-                callbackFn({
-                    ...message.payload,
-                    target: this
-                });
+                callbackFn(extendObject({}, message.payload, { target: this }));
             }
         });
     }