@mpxjs/webpack-plugin 2.10.4-beta.18 → 2.10.4-beta.19-input

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

@@ -3,12 +3,13 @@ import { collectDataset } from '@mpxjs/utils';
 import { omit, extendObject, useNavigation } from './utils';
 import eventConfigMap from './event.config';
 const globalEventState = {
-    needPress: true
+    needPress: true,
+    identifier: null
 };
 const getTouchEvent = (type, event, config) => {
     const { navigation, propsRef, layoutRef } = config;
     const props = propsRef.current;
-    const { y: navigationY = 0 } = navigation?.layout || {};
+    const { top: navigationY = 0 } = navigation?.layout || {};
     const nativeEvent = event.nativeEvent;
     const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
     const { id } = props;
@@ -94,36 +95,48 @@ function checkIsNeedPress(e, type, ref) {
         ref.current.startTimer[type] = null;
     }
 }
+function shouldHandleTapEvent(e, eventConfig) {
+    const { identifier } = e.nativeEvent.changedTouches[0];
+    return eventConfig.tap && globalEventState.identifier === identifier;
+}
 function handleTouchstart(e, type, eventConfig) {
-    // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
     e.persist();
     const { innerRef } = eventConfig;
-    globalEventState.needPress = true;
-    innerRef.current.mpxPressInfo.detail = {
-        x: e.nativeEvent.changedTouches[0].pageX,
-        y: e.nativeEvent.changedTouches[0].pageY
-    };
+    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
+        };
+    }
     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');
+        // 只有单指触摸时才启动长按定时器
+        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);
         }
-        innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
-        innerRef.current.startTimer[type] = setTimeout(() => {
-            // 只要触发过longpress, 全局就不再触发tap
-            globalEventState.needPress = false;
-            handleEmitEvent('longpress', e, type, eventConfig);
-        }, 350);
     }
 }
 function handleTouchmove(e, type, eventConfig) {
     const { innerRef } = eventConfig;
     handleEmitEvent('touchmove', e, type, eventConfig);
-    if (eventConfig.tap) {
+    if (shouldHandleTapEvent(e, eventConfig)) {
         checkIsNeedPress(e, type, innerRef);
     }
 }
@@ -131,7 +144,8 @@ 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) {
+    // 只有单指触摸结束时才触发 tap
+    if (shouldHandleTapEvent(e, eventConfig)) {
         checkIsNeedPress(e, type, innerRef);
         if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
             return;

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

@@ -42,6 +42,7 @@ import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, w
 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'],
@@ -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 });
@@ -262,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 }));
             }
         });
     }

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

@@ -23,6 +23,7 @@ import './CanvasGradient';
 import { createImage as canvasCreateImage } from './Image';
 import { createImageData as canvasCreateImageData } from './ImageData';
 import { useConstructorsRegistry } from './constructorsRegistry';
+import Portal from '../mpx-portal';
 const stylesheet = StyleSheet.create({
     container: { overflow: 'hidden', flex: 0 },
     webview: {
@@ -41,7 +42,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
     const { style = {}, originWhitelist = ['*'], 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [isLoaded, setIsLoaded] = useState(false);
     const nodeRef = useRef(null);
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
+    const { normalStyle, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(extendObject({}, style, stylesheet.container), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -110,10 +111,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
     const postMessage = useCallback(async (message) => {
         if (!canvasRef.current?.bus)
             return;
-        const { type, payload } = await canvasRef.current.bus.post({
-            id: ID(),
-            ...message
-        });
+        const { type, payload } = await canvasRef.current.bus.post(extendObject({ id: ID() }, message));
         switch (type) {
             case 'error': {
                 const { binderror } = props;
@@ -142,7 +140,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
         canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1);
     };
     const onMessage = useCallback((e) => {
-        let data = JSON.parse(e.nativeEvent.data);
+        const data = JSON.parse(e.nativeEvent.data);
         switch (data.type) {
             case 'error': {
                 const { binderror } = props;
@@ -156,27 +154,27 @@ const _Canvas = forwardRef((props = {}, ref) => {
                 break;
             }
             default: {
+                const newData = {};
+                // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
+                const constructor = constructors[data.meta.constructor];
                 if (data.payload) {
-                    // createLinearGradient 方法调用需要在 constructors 中需要注册 CanvasGradient
-                    const constructor = constructors[data.meta.constructor];
                     if (constructor) {
                         const { args, payload } = data;
                         // RN 端同步生成一个 CanvasGradient 的实例
                         const object = constructor.constructLocally(canvasRef.current, ...args);
-                        Object.assign(object, payload, {
+                        extendObject(object, payload, {
                             [WEBVIEW_TARGET]: data.meta.target
                         });
-                        data = {
-                            ...data,
+                        extendObject(newData, data, {
                             payload: object
-                        };
+                        });
                     }
                     for (const listener of canvasRef.current.listeners) {
-                        listener(data.payload);
+                        listener(constructor ? newData.payload : data.payload);
                     }
                 }
                 if (canvasRef.current.bus) {
-                    canvasRef.current.bus.handle(data);
+                    canvasRef.current.bus.handle(constructor && data.payload ? newData : data);
                 }
             }
         }
@@ -192,9 +190,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
         node: canvasRef.current,
         context: context2D
     });
-    if (__mpx_mode__ !== 'ios') {
+    let canvasComponent;
+    if (__mpx_mode__ === 'android') {
         const isAndroid9 = Platform.Version >= 28;
-        return createElement(View, innerProps, createElement(WebView, {
+        canvasComponent = createElement(View, innerProps, createElement(WebView, {
             ref: (element) => {
                 if (canvasRef.current) {
                     canvasRef.current.webview = element;
@@ -217,7 +216,7 @@ const _Canvas = forwardRef((props = {}, ref) => {
             allowUniversalAccessFromFileURLs: true
         }));
     }
-    return createElement(View, innerProps, createElement(WebView, {
+    canvasComponent = createElement(View, innerProps, createElement(WebView, {
         ref: (element) => {
             if (canvasRef.current) {
                 canvasRef.current.webview = element;
@@ -230,6 +229,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
         onLoad: onLoad,
         scrollEnabled: false
     }));
+    if (hasPositionFixed) {
+        canvasComponent = createElement(Portal, null, canvasComponent);
+    }
+    return canvasComponent;
 });
 _Canvas.displayName = 'mpxCanvas';
 export default _Canvas;

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

@@ -8,6 +8,7 @@ import { FormContext, CheckboxGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import Portal from './mpx-portal';
 const CheckboxGroup = forwardRef((props, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
@@ -23,7 +24,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
         flexWrap: 'wrap'
     };
     const styleObj = extendObject({}, defaultStyle, style);
-    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 });
@@ -81,10 +82,14 @@ const CheckboxGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    return createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(CheckboxGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 CheckboxGroup.displayName = 'MpxCheckboxGroup';
 export default CheckboxGroup;

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

@@ -12,6 +12,7 @@ import useNodesRef from './useNodesRef';
 import Icon from './mpx-icon';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { CheckboxGroupContext, LabelContext } from './context';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
@@ -63,7 +64,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         onChange(evt);
     };
-    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: extendObject({}, defaultStyle, normalStyle),
@@ -114,7 +115,7 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
             }
         }
     }, [checked]);
-    return createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: defaultStyle }, createElement(Icon, {
         type: 'success_no_circle',
         size: 18,
         color: disabled ? '#ADADAD' : color,
@@ -125,6 +126,10 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
         textStyle,
         textProps
     }));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Checkbox.displayName = 'MpxCheckbox';
 export default Checkbox;

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

@@ -17,6 +17,7 @@ import Cancel from './icons/cancel.png';
 import Download from './icons/download.png';
 import Search from './icons/search.png';
 import Clear from './icons/clear.png';
+import Portal from '../mpx-portal';
 const IconTypeMap = new Map([
     ['success', Success],
     ['success_no_circle', SuccessNoCircle],
@@ -33,7 +34,7 @@ const Icon = forwardRef((props, ref) => {
     const source = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
     const styleObj = extendObject({}, defaultStyle, style);
-    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, 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 });
@@ -44,7 +45,11 @@ const Icon = forwardRef((props, ref) => {
     }), [], {
         layoutRef
     });
-    return createElement(Image, innerProps);
+    const finalComponent = createElement(Image, innerProps);
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Icon.displayName = 'MpxIcon';
 export default Icon;

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

@@ -17,6 +17,7 @@ import { SvgCssUri } from 'react-native-svg/css';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils';
+import Portal from './mpx-portal';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
 const cropMode = [
@@ -79,7 +80,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({
         props,
         hasSelfPercent,
@@ -255,6 +256,8 @@ const Image = forwardRef((props, ref) => {
                     state.current = {};
                     setLoaded(true);
                 }
+            }, () => {
+                setLoaded(true);
             });
         }
     }, [src, isSvg, isLayoutMode]);
@@ -268,25 +271,35 @@ const Image = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    const SvgImage = createElement(View, innerProps, createElement(SvgCssUri, {
-        uri: src,
-        onLayout: onSvgLoad,
-        onError: binderror && onSvgError,
-        style: extendObject({ transformOrigin: 'left top' }, modeStyle)
-    }));
-    const BaseImage = renderImage(extendObject({
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
-        style: extendObject({
-            transformOrigin: 'left top',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-        }, isCropMode ? modeStyle : {})
-    }, isLayoutMode ? {} : innerProps), enableFastImage);
-    const LayoutImage = createElement(View, innerProps, loaded && BaseImage);
-    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    function renderSvgImage() {
+        return createElement(View, innerProps, createElement(SvgCssUri, {
+            uri: src,
+            onLayout: onSvgLoad,
+            onError: binderror && onSvgError,
+            style: extendObject({ transformOrigin: 'left top' }, modeStyle)
+        }));
+    }
+    function renderBaseImage() {
+        return renderImage(extendObject({
+            source: { uri: src },
+            resizeMode: resizeMode,
+            onLoad: bindload && onImageLoad,
+            onError: binderror && onImageError,
+            style: extendObject({
+                transformOrigin: 'left top',
+                width: isCropMode ? imageWidth : '100%',
+                height: isCropMode ? imageHeight : '100%'
+            }, isCropMode ? modeStyle : {})
+        }, isLayoutMode ? {} : innerProps), enableFastImage);
+    }
+    function renderLayoutImage() {
+        return createElement(View, innerProps, loaded && renderBaseImage());
+    }
+    const finalComponent = isSvg ? renderSvgImage() : isLayoutMode ? renderLayoutImage() : renderBaseImage();
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Image.displayName = 'mpx-image';
 export default Image;

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

@@ -44,6 +44,7 @@ import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } fr
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
+import Portal from './mpx-portal';
 const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
@@ -83,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
         ? { height: 'auto', minHeight: Math.max(style?.minHeight || 35, contentHeight) }
         : {});
-    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -289,7 +290,11 @@ const Input = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    return createElement(TextInput, innerProps);
+    const finalComponent = createElement(TextInput, innerProps);
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Input.displayName = 'MpxInput';
 export default Input;

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

@@ -8,6 +8,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { LabelContext } from './context';
+import Portal from './mpx-portal';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
     const propsRef = useRef({});
@@ -17,7 +18,7 @@ const Label = forwardRef((labelProps, ref) => {
         flexDirection: 'row'
     };
     const styleObj = extendObject({}, defaultStyle, style);
-    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 });
@@ -40,12 +41,16 @@ const Label = forwardRef((labelProps, ref) => {
     }), [], {
         layoutRef
     });
-    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Label.displayName = 'MpxLabel';
 export default Label;