@mpxjs/webpack-plugin 2.10.5 → 2.10.6

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

@@ -1,11 +1,12 @@
 import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
-import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
+import React, { forwardRef, useRef, useEffect, useMemo, createElement } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
 import { SwiperContext } from './context';
+import Portal from './mpx-portal';
 /**
  * 默认的Style类型
  */
@@ -70,14 +71,19 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showsPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, style = {}, autoplay = false, circular = false } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    // 手势协同gesture 1.0
+    const swiperGestureRef = useRef();
+    useNodesRef(props, ref, nodeRef, {
+        // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
+        gestureRef: swiperGestureRef
+    });
     // 计算transfrom之类的
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -121,6 +127,23 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTime = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
+    // 判断gesture手势是否需要协同处理、等待手势失败响应
+    const gestureSwitch = useRef(false);
+    // 初始化上一次的手势
+    const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    // 存储上一次的手势
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -164,8 +187,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     });
     function renderPagination() {
-        if (children.length <= 1)
-            return null;
         const activeColor = activeDotColor || '#007aff';
         const unActionColor = dotColor || 'rgba(0,0,0,.2)';
         // 正常渲染所有dots
@@ -490,6 +511,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 });
             }
         }
+        function handleBackInit() {
+            'worklet';
+            // 微信的效果
+            // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
+            offset.value = withTiming(0, {
+                duration: easeDuration,
+                easing: easeMap[easeingFunc]
+            });
+        }
         function handleBack(eventData) {
             'worklet';
             const { translation } = eventData;
@@ -596,7 +626,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             }
             const { isBoundary, resetOffset } = reachBoundary(eventData);
-            if (isBoundary && circularShared.value) {
+            if (childrenLength.value > 1 && isBoundary && circularShared.value) {
                 offset.value = resetOffset;
             }
             else {
@@ -614,6 +644,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             const eventData = {
                 translation: moveDistance
             };
+            if (childrenLength.value === 1) {
+                return handleBackInit();
+            }
             // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
             if (!circularShared.value && !canMove(eventData)) {
                 return;
@@ -625,11 +658,26 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 handleEnd(eventData);
             }
-        });
+        })
+            .withRef(swiperGestureRef);
+        // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+        if (dir === 'x') {
+            gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5]);
+        }
+        else {
+            gesturePan.activeOffsetY([-2, 2]).failOffsetX([-5, 5]);
+        }
+        // 手势协同2.0
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
+        }
         return {
             gestureHandler: gesturePan
         };
-    }, []);
+    }, [gestureSwitch.current]);
     const animatedStyles = useAnimatedStyle(() => {
         if (dir === 'x') {
             return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 };
@@ -638,34 +686,32 @@ const SwiperWrapper = forwardRef((props, ref) => {
             return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 };
         }
     });
-    function renderSwiper() {
-        const arrPages = renderItems();
-        return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-      <Animated.View style={[{
-                    flexDirection: dir === 'x' ? 'row' : 'column',
-                    width: '100%',
-                    height: '100%'
-                }, animatedStyles]}>
-        {wrapChildren({
-                children: arrPages
-            }, {
-                hasVarDec,
-                varContext: varContextRef.current,
-                textStyle,
-                textProps
-            })}
-      </Animated.View>
-      {showsPagination && renderPagination()}
-    </View>);
-    }
-    if (children.length === 1) {
-        return renderSwiper();
+    let finalComponent;
+    const arrPages = renderItems();
+    const mergeProps = Object.assign({
+        style: [normalStyle, layoutStyle, styles.swiper]
+    }, layoutProps, innerProps);
+    const animateComponent = createElement(Animated.View, {
+        style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
+    }, wrapChildren({
+        children: arrPages
+    }, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }));
+    const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent;
+    finalComponent = createElement(View, mergeProps, renderChildrens);
+    if (!disableGesture) {
+        finalComponent = createElement(GestureDetector, {
+            gesture: gestureHandler
+        }, finalComponent);
     }
-    else {
-        return (<GestureDetector gesture={gestureHandler}>
-      {renderSwiper()}
-    </GestureDetector>);
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
     }
+    return finalComponent;
 });
 SwiperWrapper.displayName = 'MpxSwiperWrapper';
 export default SwiperWrapper;

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

@@ -10,6 +10,7 @@ import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import CheckBox from './mpx-checkbox';
+import Portal from './mpx-portal';
 import { FormContext } from './context';
 import { useTransformStyle, useLayout, extendObject } from './utils';
 const _Switch = forwardRef((props, ref) => {
@@ -21,7 +22,7 @@ const _Switch = forwardRef((props, ref) => {
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -83,13 +84,17 @@ const _Switch = forwardRef((props, ref) => {
             checked: isChecked
         }));
     }
-    return createElement(Switch, extendObject({}, innerProps, {
+    let finalComponent = createElement(Switch, extendObject({}, innerProps, {
         style: normalStyle,
         value: isChecked,
         trackColor: { false: '#FFF', true: color },
         thumbColor: isChecked ? '#FFF' : '#f4f3f4',
         ios_backgroundColor: '#FFF'
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Switch.displayName = 'MpxSwitch';
 export default _Switch;

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

@@ -5,12 +5,13 @@
  */
 import { Text } from 'react-native';
 import { useRef, forwardRef, createElement } from 'react';
+import Portal from './mpx-portal';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils';
 const _Text = forwardRef((props, ref) => {
     const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
+    const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -29,10 +30,14 @@ const _Text = forwardRef((props, ref) => {
     }), [
         'user-select'
     ]);
-    return createElement(Text, innerProps, wrapChildren(props, {
+    let finalComponent = createElement(Text, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _Text.displayName = 'MpxText';
 export default _Text;

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

@@ -68,6 +68,7 @@ import { StyleSheet, View } from 'react-native';
 import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         width: 300,
@@ -85,7 +86,7 @@ const MpxVideo = forwardRef((videoProps, ref) => {
     const videoInfoRef = useRef({});
     const propsRef = useRef({});
     propsRef.current = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(extendObject({}, styles.container, style), {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -243,6 +244,10 @@ const MpxVideo = forwardRef((videoProps, ref) => {
         'bindcontrolstoggle',
         'bindseekcomplete'
     ], { layoutRef });
-    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    let videoComponent = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+    if (hasPositionFixed) {
+        videoComponent = createElement(Portal, null, videoComponent);
+    }
+    return videoComponent;
 });
 export default MpxVideo;

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

@@ -523,10 +523,8 @@ function useWrapImage(imageStyle, innerStyle, enableFastImage) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
-  </View>;
+    const backgroundProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {}, { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' }) });
+    return createElement(View, backgroundProps, show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current))), show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage));
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {

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

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement, createElement } from 'react';
 import { Image } from 'react-native';
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
 import { VarContext, ScrollViewContext, RouteContext } from './context';
@@ -517,7 +517,7 @@ export function getCurrentPage(pageId) {
 }
 export function renderImage(imageProps, enableFastImage = false) {
     const Component = enableFastImage ? FastImage : Image;
-    return <Component {...imageProps}/>;
+    return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {
     return pickedKeys.reduce((acc, key) => {

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

@@ -51,6 +51,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
 import type { ExtendedViewStyle } from './types/common'
+import Portal from './mpx-portal'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -290,6 +291,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -412,9 +414,15 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHover
+  const finalComponent = enableHover
     ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Button.displayName = 'MpxButton'

package/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -1,4 +1,5 @@
 import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+import { extendObject } from '../utils'
 
 const PROPERTIES = {
   crossOrigin: undefined,
@@ -60,10 +61,9 @@ export class Image {
             this[key] = value
           }
         }
-        callbackFn({
-          ...message.payload,
-          target: this
-        })
+        callbackFn(
+          extendObject({}, message.payload, { target: this })
+        )
       }
     })
   }

package/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -9,7 +9,7 @@
  * ✔ bindlongtap
  * ✔ binderror
  */
-import React, { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
+import { createElement, useRef, useState, useCallback, useEffect, forwardRef, JSX, TouchEvent, MutableRefObject } from 'react'
 import { View, Platform, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
@@ -31,6 +31,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 },
@@ -71,6 +72,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   const {
     normalStyle,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(extendObject({}, style, stylesheet.container), {
@@ -166,10 +168,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
 
   const postMessage = useCallback(async (message: WebviewMessage) => {
     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': {
@@ -204,7 +203,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
-    let data = JSON.parse(e.nativeEvent.data)
+    const data = JSON.parse(e.nativeEvent.data)
     switch (data.type) {
       case 'error': {
         const { binderror } = props
@@ -220,27 +219,27 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         break
       }
       default: {
+        const newData: { payload?: unknown } = {}
+        // 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)
         }
       }
     }
@@ -259,9 +258,11 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     context: context2D
   })
 
-  if (__mpx_mode__ !== 'ios') {
+  let canvasComponent
+
+  if (__mpx_mode__ === 'android') {
     const isAndroid9 = Platform.Version as number >= 28
-    return createElement(View, innerProps, createElement(
+    canvasComponent = createElement(View, innerProps, createElement(
       WebView,
       {
         ref: (element) => {
@@ -288,7 +289,7 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     )
   }
 
-  return createElement(View, innerProps, createElement(WebView, {
+  canvasComponent = createElement(View, innerProps, createElement(WebView, {
     ref: (element) => {
       if (canvasRef.current) {
         canvasRef.current.webview = element
@@ -301,6 +302,12 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
     onLoad: onLoad,
     scrollEnabled: false
   }))
+
+  if (hasPositionFixed) {
+    canvasComponent = createElement(Portal, null, canvasComponent)
+  }
+
+  return canvasComponent
 })
 
 _Canvas.displayName = 'mpxCanvas'

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -21,6 +21,7 @@ import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from '.
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export interface CheckboxGroupProps {
   name: string
@@ -68,6 +69,7 @@ const CheckboxGroup = forwardRef<
   const styleObj = extendObject({}, defaultStyle, style)
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -159,7 +161,7 @@ const CheckboxGroup = forwardRef<
     }
   }, [])
 
-  return createElement(
+  const finalComponent = createElement(
     View,
     innerProps,
     createElement(
@@ -174,6 +176,12 @@ const CheckboxGroup = forwardRef<
       )
     )
   )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 CheckboxGroup.displayName = 'MpxCheckboxGroup'

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

@@ -28,6 +28,7 @@ import useNodesRef, { HandlerRef } 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'
 
 interface Selection {
   value?: string
@@ -128,6 +129,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     }
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -206,7 +208,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    return createElement(View, innerProps,
+    const finalComponent = createElement(View, innerProps,
       createElement(
         View,
         { style: defaultStyle },
@@ -227,6 +229,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         }
       )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-icon/index.tsx

@@ -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'
 
 export type IconType =
   | 'success'
@@ -75,6 +76,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       setWidth,
@@ -103,7 +105,13 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       }
     )
 
-    return createElement(Image, innerProps)
+    const finalComponent = createElement(Image, innerProps)
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )