@mpxjs/webpack-plugin 2.10.3-beta.17 → 2.10.3-beta.19

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,
@@ -56,11 +57,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
     });
     const { register } = useConstructorsRegistry();
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 }),
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
+    }), [], {
         layoutRef
     });
     const context2D = new CanvasRenderingContext2D(canvasRef.current);
@@ -111,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;
@@ -143,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;
@@ -157,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);
                 }
             }
         }
@@ -193,9 +190,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
         node: canvasRef.current,
         context: context2D
     });
-    if (Platform.OS === 'android') {
+    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;
@@ -218,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;
@@ -231,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 });
@@ -57,10 +58,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
             }
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), [
+    }), [
         'name'
     ], {
         layoutRef
@@ -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),
@@ -82,10 +83,9 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
     if (labelContext) {
         labelContext.current.triggerChange = onChange;
     }
-    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
     }), [
         'value',
@@ -115,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,
@@ -126,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-form.jsx

@@ -22,10 +22,10 @@ const _Form = forwardRef((fromProps, ref) => {
     const propsRef = useRef({});
     propsRef.current = props;
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({}, innerStyle, layoutStyle),
         ref: formRef
-    }, layoutProps), [
+    }), [
         'bindsubmit',
         'bindreset'
     ], { layoutRef });

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,18 +34,22 @@ 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 });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         source,
         style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
-    }, layoutProps), [], {
+    }), [], {
         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 = [
@@ -39,7 +40,16 @@ const ModeMap = new Map([
     ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
-const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+const relativeCenteredSize = (viewSize, imageSize) => {
+    return (viewSize - imageSize) / 2;
+};
+// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
+function getFitScale(width1, height1, width2, height2) {
+    return Math.min(width2 / width1, height2 / height1);
+}
+function getFillScale(width1, height1, width2, height2) {
+    return Math.max(width2 / width1, height2 / height1);
+}
 function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
     const isMeetSize = viewWidth && viewHeight && ratio;
     if (isSvg && !isMeetSize)
@@ -48,6 +58,16 @@ function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
         return true;
     return false;
 }
+const getFixedWidth = (viewWidth, viewHeight, ratio) => {
+    if (!ratio)
+        return viewWidth;
+    const fixed = viewHeight / ratio;
+    return !fixed ? viewWidth : fixed;
+};
+const getFixedHeight = (viewWidth, viewHeight, ratio) => {
+    const fixed = viewWidth * ratio;
+    return !fixed ? viewHeight : fixed;
+};
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
     const defaultStyle = {
@@ -55,7 +75,6 @@ const Image = forwardRef((props, ref) => {
         height: DEFAULT_IMAGE_HEIGHT
     };
     const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
-    const state = useRef({});
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         defaultStyle
@@ -69,17 +88,23 @@ const Image = forwardRef((props, ref) => {
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
+        // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
+        if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
+            if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+                if (!loaded)
+                    setLoaded(true);
+            }
+            return;
+        }
         if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-            setViewWidth(width);
-            setViewHeight(height);
             setRatio(state.current.ratio);
             setImageWidth(state.current.imageWidth);
             setImageHeight(state.current.imageHeight);
-            state.current = {};
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
             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,
@@ -95,43 +120,56 @@ const Image = forwardRef((props, ref) => {
     const [imageHeight, setImageHeight] = useState(0);
     const [ratio, setRatio] = useState(0);
     const [loaded, setLoaded] = useState(!isLayoutMode);
-    const fixedHeight = useMemo(() => {
-        const fixed = viewWidth * ratio;
-        return !fixed ? viewHeight : fixed;
-    }, [ratio, viewWidth, viewHeight]);
-    const fixedWidth = useMemo(() => {
-        if (!ratio)
-            return viewWidth;
-        const fixed = viewHeight / ratio;
-        return !fixed ? viewWidth : fixed;
-    }, [ratio, viewWidth, viewHeight]);
+    const state = useRef({
+        viewWidth,
+        viewHeight
+    });
+    function setViewSize(viewWidth, viewHeight, ratio) {
+        // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
+        switch (mode) {
+            case 'widthFix': {
+                setViewWidth(viewWidth);
+                const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio);
+                setViewHeight(fixedHeight);
+                break;
+            }
+            case 'heightFix': {
+                setViewHeight(viewHeight);
+                const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio);
+                setViewWidth(fixedWidth);
+                break;
+            }
+            default:
+                setViewHeight(viewHeight);
+                setViewWidth(viewWidth);
+                break;
+        }
+    }
     const modeStyle = useMemo(() => {
         if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
             return {};
         switch (mode) {
-            case 'scaleToFill':
+            case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
             case 'aspectFit':
                 if (isSvg) {
-                    const scale = ratio <= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
                 return {};
             case 'aspectFill':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
@@ -139,9 +177,7 @@ const Image = forwardRef((props, ref) => {
             case 'widthFix':
             case 'heightFix':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
-                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [{ scale }]
                     };
@@ -204,12 +240,23 @@ const Image = forwardRef((props, ref) => {
             default:
                 return {};
         }
-    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio]);
     const onSvgLoad = (evt) => {
         const { width, height } = evt.nativeEvent.layout;
-        setRatio(!width ? 0 : height / width);
-        setImageWidth(width);
+        state.current.imageHeight = height;
         setImageHeight(height);
+        state.current.ratio = !width ? 0 : height / width;
+        if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+                ? state.current.viewHeight
+                : state.current.viewWidth && state.current.viewHeight) {
+            setRatio(state.current.ratio);
+            setImageWidth(width);
+            setImageHeight(height);
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+            setLoaded(true);
+        }
         bindload && bindload(getCustomEvent('load', evt, {
             detail: { width, height },
             layoutRef
@@ -247,21 +294,21 @@ const Image = forwardRef((props, ref) => {
                     : isHeightFixMode
                         ? state.current.viewHeight
                         : state.current.viewWidth && state.current.viewHeight) {
-                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
-                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
-                    setRatio(!width ? 0 : height / width);
+                    setRatio(state.current.ratio);
                     setImageWidth(width);
                     setImageHeight(height);
-                    state.current = {};
+                    setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
                     setLoaded(true);
                 }
+            }, () => {
+                setLoaded(true);
             });
         }
     }, [src, isSvg, isLayoutMode]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
-    }, layoutProps), [
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
+    }), [
         'src',
         'mode',
         'svg'
@@ -286,7 +333,11 @@ const Image = forwardRef((props, ref) => {
         }, isCropMode ? modeStyle : {})
     }, isLayoutMode ? {} : innerProps), enableFastImage);
     const LayoutImage = createElement(View, innerProps, loaded && BaseImage);
-    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Image.displayName = 'mpx-image';
 export default Image;

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

@@ -0,0 +1,11 @@
+import { Text } from 'react-native';
+import { createElement } from 'react';
+import { extendObject } from './utils';
+const InlineText = (props) => {
+    const { allowFontScaling = false } = props;
+    return createElement(Text, extendObject({}, props, {
+        allowFontScaling
+    }));
+};
+InlineText.displayName = 'MpxInlineText';
+export default InlineText;

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

@@ -38,20 +38,18 @@
  * ✘ bind:onkeyboardheightchange
  */
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
-import { Platform, TextInput } from 'react-native';
+import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils';
 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',
     idcard: 'default',
-    digit: Platform.select({
-        ios: 'decimal-pad',
-        android: 'numeric'
-    }) || ''
+    digit: isIOS ? 'decimal-pad' : 'numeric'
 };
 const Input = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
@@ -86,14 +84,14 @@ 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
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
-        if (inputValue !== value) {
+        if (value !== tmpValue.current) {
             const parsed = parseValue(value);
             tmpValue.current = parsed;
             setInputValue(parsed);
@@ -250,7 +248,7 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
@@ -267,8 +265,7 @@ const Input = forwardRef((props, ref) => {
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
+        multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -277,7 +274,7 @@ const Input = forwardRef((props, ref) => {
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-    }), [
+    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',
@@ -293,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;