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

package/lib/runtime/components/react/dist/{mpx-picker-view-column-item.jsx → mpx-picker-view-column/pickerViewColumnItem.jsx}

@@ -1,23 +1,20 @@
-import React, { useEffect } from 'react';
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { extendObject } from './utils';
-import { createFaces } from './pickerFaces';
-import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext';
+import React, { useMemo } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { extendObject } from '../utils';
+import { createFaces } from './pickerViewFaces';
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
 const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
     const textStyleFromAncestor = usePickerViewStyleContext();
     const offsetYShared = usePickerViewColumnAnimationContext();
-    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
-    useEffect(() => {
-        facesShared.value = createFaces(itemHeight, visibleCount);
-    }, [itemHeight]);
+    const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount]);
     const animatedStyles = useAnimatedStyle(() => {
-        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
+        const inputRange = facesShared.map((f) => itemHeight * (index + f.index));
         return {
-            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
             transform: [
-                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
-                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
             ]
         };
     });
@@ -27,8 +24,11 @@ const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', tex
         style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromAncestor, textStyle, item.props.style)
     }, textProps, restProps);
     const realItem = React.cloneElement(item, itemProps);
-    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
-      {realItem}
+    return (<Reanimated.View key={strKey} style={[
+            { height: itemHeight, width: itemWidth, pointerEvents: 'none' },
+            animatedStyles
+        ]}>
+        {realItem}
     </Reanimated.View>);
 };
 PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import { extendObject } from '../utils';
+import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
+const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, onItemLayout }) => {
+    const textStyleFromAncestor = usePickerViewStyleContext();
+    const strKey = `picker-column-item-${index}`;
+    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
+    const itemProps = extendObject({
+        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromAncestor, textStyle, item.props.style)
+    }, textProps, restProps);
+    const realItem = React.cloneElement(item, itemProps);
+    return (<View key={strKey} style={[
+            { height: itemHeight, width: itemWidth, pointerEvents: 'none' }
+        ]}>
+      {realItem}
+    </View>);
+};
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default PickerViewColumnItem;

package/lib/runtime/components/react/dist/{pickerFaces.js → mpx-picker-view-column/pickerViewFaces.js}

@@ -11,6 +11,12 @@ export const calcPickerHeight = (faces, itemHeight) => {
     }
     return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
 };
+export const calcHeightOffsets = (itemHeight) => {
+    const h1 = itemHeight / 2;
+    const h2 = h1 + calcHeight(30, itemHeight);
+    const h3 = h2 + calcHeight(60, itemHeight);
+    return [h1, h2, h3];
+};
 export const createFaces = (itemHeight, visibleCount) => {
     // e.g [30, 60, 90]
     const getDegreesRelativeCenter = () => {

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

@@ -0,0 +1,61 @@
+import { cloneElement } from 'react';
+import Portal from '../mpx-portal';
+import PopupBase from './popupBase';
+/**
+ * 根据 type 返回对应的弹窗壳子组件
+ */
+const getPopup = (type) => {
+    switch (type) {
+        case "picker" /* PopupType.PICKER */:
+        default:
+            return PopupBase;
+    }
+};
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+const createPopupManager = (options = {}) => {
+    const { modal, type } = options;
+    const Modal = modal || getPopup(type);
+    let popupKey = null;
+    let isOpen = false;
+    let child = null;
+    const remove = () => {
+        if (popupKey !== null) {
+            Portal.remove(popupKey);
+            popupKey = null;
+        }
+        isOpen = false;
+    };
+    const open = (childComponent, pageId, options) => {
+        if (!isOpen && pageId != null) {
+            isOpen = true;
+            child = (<Modal hide={hide} {...options} visible={false}>
+          {childComponent}
+        </Modal>);
+            popupKey = Portal.add(child, pageId);
+        }
+    };
+    const update = (updatedChild) => {
+        if (popupKey !== null && child !== null && updatedChild !== null) {
+            child = cloneElement(child, { children: updatedChild });
+            Portal.update(popupKey, child);
+        }
+    };
+    const _updateVisible = (visible) => {
+        if (popupKey !== null && child !== null) {
+            child = cloneElement(child, { visible });
+            Portal.update(popupKey, child);
+        }
+    };
+    const show = () => _updateVisible(true);
+    const hide = () => _updateVisible(false);
+    return {
+        open,
+        show,
+        hide,
+        update,
+        remove
+    };
+};
+export { createPopupManager };

package/lib/runtime/components/react/dist/mpx-popup/popupBase.jsx

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { getWindowInfo } from '@mpxjs/api-proxy';
+import { useUpdateEffect } from '../utils';
+const windowInfo = getWindowInfo();
+const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom;
+const styles = StyleSheet.create({
+    mask: {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        position: 'absolute',
+        zIndex: 1000
+    },
+    content: {
+        backgroundColor: '#ffffff',
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        paddingBottom: bottom
+    },
+    buttonStyle: {
+        fontSize: 18,
+        paddingTop: 10,
+        paddingBottom: 10
+    }
+});
+const MASK_ON = 1;
+const MASK_OFF = 0;
+const MOVEOUT_HEIGHT = 330;
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+const PopupBase = (props = {}) => {
+    const { children, hide = () => null, contentHeight = MOVEOUT_HEIGHT, visible = false } = props;
+    const fade = useSharedValue(MASK_OFF);
+    const slide = useSharedValue(contentHeight);
+    const animatedStylesMask = useAnimatedStyle(() => ({
+        opacity: fade.value
+    }));
+    const animatedStylesContent = useAnimatedStyle(() => ({
+        transform: [{ translateY: slide.value }]
+    }));
+    const showAimation = () => {
+        fade.value = withTiming(MASK_ON, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+        slide.value = withTiming(0, {
+            easing: Easing.out(Easing.poly(3)),
+            duration: 300
+        });
+    };
+    const hideAnimation = () => {
+        fade.value = withTiming(MASK_OFF, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+        slide.value = withTiming(contentHeight, {
+            easing: Easing.inOut(Easing.poly(3)),
+            duration: 300
+        });
+    };
+    useUpdateEffect(() => {
+        if (visible) {
+            showAimation();
+        }
+        else {
+            hideAnimation();
+        }
+    }, [visible]);
+    const preventMaskClick = (e) => {
+        e.stopPropagation();
+    };
+    return (<Animated.View onTouchEnd={hide} style={[
+            styles.mask,
+            animatedStylesMask,
+            { pointerEvents: visible ? 'auto' : 'none' }
+        ]}>
+      <Animated.View style={[styles.content, animatedStylesContent]} onTouchEnd={preventMaskClick}>
+        {children}
+      </Animated.View>
+    </Animated.View>);
+};
+PopupBase.displayName = 'MpxPopupBase';
+export default PopupBase;

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

@@ -1,14 +1,18 @@
 import { useContext, useEffect, useRef } from 'react';
-import { PortalContext, RouteContext, VarContext } from '../context';
+import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context';
 import PortalHost, { portal } from './portal-host';
 const Portal = ({ children }) => {
     const manager = useContext(PortalContext);
     const keyRef = useRef(null);
     const { pageId } = useContext(RouteContext) || {};
     const varContext = useContext(VarContext);
+    const parentProvides = useContext(ProviderContext);
     if (varContext) {
         children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
     }
+    if (parentProvides) {
+        children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>);
+    }
     useEffect(() => {
         manager.update(keyRef.current, children);
     }, [children]);

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -1,5 +1,4 @@
-import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { useState, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
 const _PortalManager = forwardRef((props, ref) => {
     const [state, setState] = useState({
         portals: []
@@ -31,10 +30,9 @@ const _PortalManager = forwardRef((props, ref) => {
         portals: state.portals
     }));
     return (<>
-      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
-         style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+      {state.portals.map(({ key, children }) => (<Fragment key={key}>
           {children}
-        </View>))}
+        </Fragment>))}
     </>);
 });
 export default _PortalManager;

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

@@ -0,0 +1,163 @@
+/**
+ * ✔ percent 进度百分比 0-100
+ * ✘ show-info 在进度条右侧显示百分比
+ * ✘ border-radius 圆角大小
+ * ✘ font-size 右侧百分比字体大小
+ * ✔ stroke-width 进度条线的宽度
+ * ✔ color 进度条颜色（请使用activeColor）
+ * ✔ activeColor 已选择的进度条的颜色
+ * ✔ backgroundColor 未选择的进度条的颜色
+ * ✔ active 进度条从左往右的动画
+ * ✔ active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播
+ * ✔ duration 进度增加1%所需毫秒数
+ * ✔ bindactiveend 动画完成事件
+ */
+import { useRef, forwardRef, useEffect, useState, createElement } from 'react';
+import { View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
+import Portal from './mpx-portal';
+const Progress = forwardRef((props, ref) => {
+    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const nodeRef = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    // 进度值状态
+    const [lastPercent, setLastPercent] = useState(0);
+    const progressWidth = useSharedValue(0);
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef
+    });
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    // 使用 useRunOnJSCallback 处理动画回调
+    const runOnJSCallbackRef = useRef({
+        triggerActiveEnd: (percent) => {
+            const currentProps = propsRef.current;
+            if (currentProps.bindactiveend) {
+                currentProps.bindactiveend({
+                    type: 'activeend',
+                    detail: {
+                        percent: percent
+                    }
+                });
+            }
+        }
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
+    // 进度条动画函数
+    const startProgressAnimation = (targetPercent, startPercent, animationDuration, onFinished) => {
+        // 根据 active-mode 设置起始位置
+        progressWidth.value = startPercent;
+        progressWidth.value = withTiming(targetPercent, {
+            duration: animationDuration,
+            easing: Easing.linear
+        }, (finished) => {
+            if (finished && onFinished) {
+                // 在动画回调中，执行传入的worklet函数
+                onFinished();
+            }
+        });
+    };
+    // 进度变化时的动画效果
+    useEffect(() => {
+        const targetPercent = Math.max(0, Math.min(100, percent));
+        if (active) {
+            // 根据 active-mode 确定起始位置
+            let startPercent;
+            if (activeMode === 'backwards') {
+                startPercent = 0;
+            }
+            else {
+                // forwards 模式：使用上次记录的百分比作为起始位置
+                startPercent = lastPercent;
+            }
+            // 计算动画持续时间
+            const percentDiff = Math.abs(targetPercent - startPercent);
+            const animationDuration = percentDiff * duration;
+            // 执行动画
+            startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
+                'worklet';
+                // 在worklet函数内部执行runOnJS调用runOnJSCallback
+                runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent);
+            });
+        }
+        else {
+            progressWidth.value = targetPercent;
+        }
+        setLastPercent(targetPercent);
+    }, [percent, active, activeMode, duration]);
+    // 初始化时设置进度值
+    useEffect(() => {
+        if (!active) {
+            progressWidth.value = Math.max(0, Math.min(100, percent));
+        }
+    }, []);
+    // 进度条动画样式
+    const animatedProgressStyle = useAnimatedStyle(() => {
+        return {
+            width: `${progressWidth.value}%`
+        };
+    });
+    // 确保数值类型正确
+    const strokeWidthNum = typeof strokeWidth === 'number' ? strokeWidth : parseInt(strokeWidth, 10) || 6;
+    // 容器样式
+    const containerStyle = extendObject({}, {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: Math.max(strokeWidthNum, 20)
+    }, normalStyle, layoutStyle);
+    // 进度条背景样式
+    const progressBgStyle = {
+        width: '100%',
+        height: strokeWidthNum,
+        backgroundColor,
+        overflow: 'hidden'
+    };
+    // 进度条填充样式
+    const progressFillStyle = {
+        height: '100%',
+        backgroundColor: activeColor
+    };
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
+        ref: nodeRef
+    }), [
+        'percent',
+        'stroke-width',
+        'color',
+        'activeColor',
+        'backgroundColor',
+        'active',
+        'active-mode',
+        'duration',
+        'bindactiveend'
+    ], { layoutRef });
+    const progressComponent = createElement(View, extendObject({}, innerProps, { style: containerStyle }), 
+    // 进度条背景
+    createElement(View, { style: progressBgStyle }, 
+    // 进度条填充
+    createElement(Animated.View, {
+        style: [progressFillStyle, animatedProgressStyle]
+    })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, progressComponent);
+    }
+    return progressComponent;
+});
+Progress.displayName = 'MpxProgress';
+export default Progress;

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

@@ -8,6 +8,7 @@ import { FormContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import Portal from './mpx-portal';
 const radioGroup = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
@@ -23,7 +24,7 @@ const radioGroup = 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 });
@@ -71,16 +72,22 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-    }, layoutProps), ['name'], {
+    }), ['name'], {
         layoutRef
     });
-    return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+    const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
+        value: contextValue
+    }, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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

@@ -12,6 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import Icon from './mpx-icon';
+import Portal from './mpx-portal';
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
@@ -73,7 +74,7 @@ const Radio = forwardRef((radioProps, 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 { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Radio does not support background image-related styles!');
@@ -91,10 +92,9 @@ const Radio = forwardRef((radioProps, 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',
@@ -124,7 +124,7 @@ const Radio = forwardRef((radioProps, 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',
         size: 24,
         color: disabled ? '#E1E1E1' : color,
@@ -135,6 +135,10 @@ const Radio = forwardRef((radioProps, ref) => {
         textStyle,
         textProps
     }));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Radio.displayName = 'MpxRadio';
 export default Radio;

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

@@ -8,6 +8,7 @@ import useNodesRef from '../useNodesRef'; // 引入辅助函数
 import { useTransformStyle, useLayout, extendObject } from '../utils';
 import { WebView } from 'react-native-webview';
 import { generateHTML } from './html';
+import Portal from '../mpx-portal';
 function jsonToHtmlStr(elements) {
     let htmlStr = '';
     for (const element of elements) {
@@ -30,7 +31,7 @@ const _RichText = forwardRef((props, ref) => {
     const { style = {}, nodes, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
     const [webViewHeight, setWebViewHeight] = useState(0);
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(Object.assign({
+    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(Object.assign({
         width: '100%',
         height: webViewHeight
     }, style), {
@@ -44,19 +45,26 @@ const _RichText = forwardRef((props, ref) => {
     useNodesRef(props, ref, nodeRef, {
         layoutRef
     });
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject(normalStyle, layoutStyle)
-    }, layoutProps), [], {
+    }), [], {
         layoutRef
     });
     const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
-    return createElement(View, innerProps, createElement(WebView, {
+    let finalComponent = createElement(View, innerProps, createElement(WebView, {
         source: { html: generateHTML(html) },
         onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
+        },
+        style: {
+            backgroundColor: 'transparent'
         }
     }));
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _RichText.displayName = 'mpx-rich-text';
 export default _RichText;