@mpxjs/webpack-plugin 2.9.69-beta.4 → 2.9.69-beta.6

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

@@ -10,7 +10,7 @@ import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
@@ -442,7 +442,7 @@ function inheritStyle(innerStyle = {}) {
         }
         : undefined);
 }
-function wrapImage(imageStyle, innerStyle, enableFastImage) {
+function useWrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -528,11 +528,6 @@ function wrapImage(imageStyle, innerStyle, enableFastImage) {
   </View>;
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
-    enableBackground = enableBackground || !!backgroundStyle;
-    const enableBackgroundRef = useRef(enableBackground);
-    if (enableBackgroundRef.current !== enableBackground) {
-        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
-    }
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -540,13 +535,14 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    const { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -556,7 +552,8 @@ const _View = forwardRef((viewProps, ref) => {
             flexWrap: 'nowrap'
         }
         : {};
-    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime });
+    const enableHover = !!hoverStyle;
+    const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime });
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
@@ -566,6 +563,11 @@ const _View = forwardRef((viewProps, ref) => {
         parentHeight
     });
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    enableBackground = enableBackground || !!backgroundStyle;
+    const enableBackgroundRef = useRef(enableBackground);
+    if (enableBackgroundRef.current !== enableBackground) {
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
+    }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -590,7 +592,7 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const childNode = wrapWithChildren(props, {
         hasVarDec,
-        enableBackground,
+        enableBackground: enableBackgroundRef.current,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
@@ -601,8 +603,8 @@ const _View = forwardRef((viewProps, ref) => {
     const BaseComponent = enableStyleAnimation
         ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
-    return enableHoverStyle
-        ? createElement(GestureDetector, { gesture }, BaseComponent)
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, BaseComponent)
         : BaseComponent;
 });
 _View.displayName = 'MpxView';

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

@@ -1,13 +1,14 @@
 import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react';
-import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils';
+import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 import { getCurrentPage, extendObject } from './utils';
+import { useNavigation } from '@react-navigation/native';
 import { RouteContext } from './context';
-import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native';
+import { BackHandler, StyleSheet, View, Text } from 'react-native';
 const styles = StyleSheet.create({
     loadErrorContext: {
         display: 'flex',
@@ -61,6 +62,7 @@ const _WebView = forwardRef((props, ref) => {
         bottom: 0
     };
     const canGoBack = useRef(false);
+    const isNavigateBack = useRef(false);
     const onAndroidBackPress = useCallback(() => {
         if (canGoBack.current) {
             webViewRef.current?.goBack();
@@ -69,42 +71,27 @@ const _WebView = forwardRef((props, ref) => {
         return false;
     }, [canGoBack]);
     const beforeRemoveHandle = useCallback((e) => {
-        if (canGoBack.current) {
+        if (canGoBack.current && !isNavigateBack.current) {
             webViewRef.current?.goBack();
             e.preventDefault();
         }
+        isNavigateBack.current = false;
     }, [canGoBack]);
-    const navigation = getFocusedNavigation();
-    // ios 16以下版本 的hash会被转义，因此对于iOS环境下在页面load之后再注入hash部分的逻辑
-    let [baseUrl, hashParams = ''] = src.split('#');
-    if (hashParams)
-        hashParams = '#' + hashParams;
-    const source = useMemo(() => {
-        if (Platform.OS === 'ios') {
-            return { uri: baseUrl };
-        }
-        return { uri: baseUrl + hashParams };
-    }, [baseUrl, hashParams]);
-    const hashInjectedJavascript = useMemo(() => {
-        if (Platform.OS === 'ios' && hashParams) {
-            return `(function() {
-        try {
-          location.hash = '${hashParams}';
-        } catch(e) {
-        }
-      })()`;
-        }
-        return '';
-    }, [hashParams]);
-    navigation?.addListener('beforeRemove', beforeRemoveHandle);
+    const navigation = useNavigation();
     useEffect(() => {
         if (__mpx_mode__ === 'android') {
             BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
-            return () => {
-                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
-                navigation?.removeListener('beforeRemove', beforeRemoveHandle);
-            };
         }
+        const addListener = navigation?.addListener.bind(navigation);
+        const beforeRemoveSubscription = addListener?.('beforeRemove', beforeRemoveHandle);
+        return () => {
+            if (__mpx_mode__ === 'android') {
+                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+            }
+            if (isFunction(beforeRemoveSubscription)) {
+                beforeRemoveSubscription();
+            }
+        };
     }, []);
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
@@ -159,7 +146,6 @@ const _WebView = forwardRef((props, ref) => {
           return _documentTitle
         }
       });
-      ${hashInjectedJavascript}
     }
     true;
   `;
@@ -218,6 +204,7 @@ const _WebView = forwardRef((props, ref) => {
                 asyncCallback = navObj.navigateTo(...params);
                 break;
             case 'navigateBack':
+                isNavigateBack.current = true;
                 asyncCallback = navObj.navigateBack(...params);
                 break;
             case 'redirectTo':
@@ -279,7 +266,7 @@ const _WebView = forwardRef((props, ref) => {
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} source={source} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} allowsBackForwardNavigationGestures={true} {...events}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} allowsBackForwardNavigationGestures={true} {...events}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

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

@@ -30,9 +30,6 @@ export const createFaces = (itemHeight, visibleCount) => {
             for (let i = 0; i < index; i++) {
                 offset += freeSpaces[i];
             }
-            if (index === 0) {
-                offset *= 0.6;
-            }
             return offset;
         });
         return [screenHeights, offsets];
@@ -41,9 +38,7 @@ export const createFaces = (itemHeight, visibleCount) => {
         const map = {
             0: 0,
             1: 0.8,
-            2: 0.9 // 0.35
-            // 3: 0.45, // 0.45
-            // 4: 0.5 // 0.5
+            2: 0.9
         };
         return map[index] ?? Math.min(1, map[2] + index * 0.05);
     };

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

@@ -139,20 +139,23 @@ export default function useAnimationHooks(props) {
     if (enableAnimationRef.current !== enableStyleAnimation) {
         error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
     }
-    if (!enableStyleAnimation)
-        return { enableStyleAnimation };
+    if (!enableAnimationRef.current)
+        return { enableStyleAnimation: false };
     const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedStyleKeys = useSharedValue([]);
     // 记录动画key的style样式值 没有的话设置为false
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedKeys = useRef({});
     // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
     // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const shareValMap = useMemo(() => {
         return Object.keys(InitialValue).reduce((valMap, key) => {
             const defaultVal = getInitialVal(key, isTransform(key));
@@ -161,6 +164,7 @@ export default function useAnimationHooks(props) {
         }, {});
     }, []);
     // ** 获取动画样式prop & 驱动动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         if (id === -1)
             return;
@@ -182,6 +186,7 @@ export default function useAnimationHooks(props) {
     //   })
     // }, [style])
     // ** 清空动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         return () => {
             Object.values(shareValMap).forEach((value) => {
@@ -214,14 +219,13 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
+                const ruleV = isTransform(key) ? transform.get(key) : rules.get(key);
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                const toVal = rules.get(key) !== undefined
-                    ? rules.get(key)
-                    : transform.get(key) !== undefined
-                        ? transform.get(key)
-                        : index > 0
-                            ? lastValueMap[key]
-                            : shareValMap[key].value;
+                const toVal = ruleV !== undefined
+                    ? ruleV
+                    : index > 0
+                        ? lastValueMap[key]
+                        : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -315,6 +319,7 @@ export default function useAnimationHooks(props) {
         }, {});
     }
     // ** 生成动画样式
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animationStyle = useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
         return animatedStyleKeys.value.reduce((styles, key) => {
@@ -335,7 +340,7 @@ export default function useAnimationHooks(props) {
         }, {});
     });
     return {
-        enableStyleAnimation,
+        enableStyleAnimation: enableAnimationRef.current,
         animationStyle
     };
 }

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

@@ -559,3 +559,60 @@ export function useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disab
         enableHoverStyle
     };
 }
+export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverRef = useRef(enableHover);
+    if (enableHoverRef.current !== enableHover) {
+        error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverRef.current)
+        return { isHover: false };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isHover, setIsHover] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dataRef = useRef({});
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        return () => {
+            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        };
+    }, []);
+    const setStartTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.startTimer = setTimeout(() => {
+            setIsHover(true);
+        }, +hoverStartTime);
+    };
+    const setStayTimer = () => {
+        if (disabled)
+            return;
+        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
+        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
+        dataRef.current.stayTimer = setTimeout(() => {
+            setIsHover(false);
+        }, +hoverStayTime);
+    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            runOnJS(setStayTimer)();
+        });
+    }, []);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture
+    };
+}

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

@@ -45,8 +45,8 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { GestureDetector } from 'react-native-gesture-handler'
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { RouteContext, FormContext } from './context'
@@ -223,7 +223,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const formContext = useContext(FormContext)
 
-  const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled })
+  const enableHover = hoverClass !== 'none'
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime, disabled })
 
   let submitFn: () => void | undefined
   let resetFn: () => void | undefined
@@ -235,15 +236,13 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const isMiniSize = size === 'mini'
 
-  const applyHoverEffect = isHover && hoverClass !== 'none'
-
   const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type]
 
-  const normalBackgroundColor = disabled ? disabledColor : applyHoverEffect || loading ? hoverColor : color
+  const normalBackgroundColor = disabled ? disabledColor : isHover || loading ? hoverColor : color
 
   const plainBorderColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor},.6)`
       : `rgb(${plainColor})`
 
@@ -251,14 +250,14 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const plainTextColor = disabled
     ? 'rgba(0, 0, 0, .2)'
-    : applyHoverEffect
+    : isHover
       ? `rgba(${plainColor}, .6)`
       : `rgb(${plainColor})`
 
   const normalTextColor =
     type === 'default'
-      ? `rgba(0, 0, 0, ${disabled ? 0.3 : applyHoverEffect || loading ? 0.6 : 1})`
-      : `rgba(255 ,255 ,255 , ${disabled || applyHoverEffect || loading ? 0.6 : 1})`
+      ? `rgba(0, 0, 0, ${disabled ? 0.3 : isHover || loading ? 0.6 : 1})`
+      : `rgba(255 ,255 ,255 , ${disabled || isHover || loading ? 0.6 : 1})`
 
   const viewStyle = {
     borderWidth: 1,
@@ -287,7 +286,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     {},
     defaultStyle,
     style,
-    applyHoverEffect ? hoverStyle : {}
+    isHover ? hoverStyle : {}
   )
 
   const {
@@ -414,8 +413,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     )
   )
 
-  return enableHoverStyle
-    ? createElement(GestureDetector, { gesture }, baseButton)
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, baseButton)
     : baseButton
 })
 

package/lib/runtime/components/react/mpx-picker-view-column-item.tsx

@@ -44,8 +44,8 @@ const _PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
     return {
       opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
       transform: [
-        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
         { 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) }
       ]
     }

package/lib/runtime/components/react/mpx-picker-view-column.tsx

@@ -69,6 +69,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const touching = useRef(false)
   const scrolling = useRef(false)
+  const timerScrollTo = useRef<NodeJS.Timeout | null>(null)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
@@ -125,6 +126,19 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
   const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10)
 
+  const clearTimerScrollTo = () => {
+    if (timerScrollTo.current) {
+      clearTimeout(timerScrollTo.current)
+      timerScrollTo.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearTimerScrollTo()
+    }
+  }, [])
+
   useEffect(() => {
     if (
       !scrollViewRef.current ||
@@ -138,7 +152,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     ) {
       return
     }
-    setTimeout(() => {
+    clearTimerScrollTo()
+    timerScrollTo.current = setTimeout(() => {
       scrollViewRef.current?.scrollTo({
         x: 0,
         y: getYofIndex(initialIndex),
@@ -151,7 +166,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const onContentSizeChange = (_w: number, h: number) => {
     const y = getYofIndex(initialIndex)
     if (y <= h) {
-      setTimeout(() => {
+      clearTimerScrollTo()
+      timerScrollTo.current = setTimeout(() => {
         scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
       }, 0)
     }

package/lib/runtime/components/react/mpx-portal/portal-consumer.tsx

@@ -23,7 +23,7 @@ const PortalConsumer = ({ manager, children } :PortalConsumerProps): JSX.Element
     const curPageId = navigation?.pageId
     keyRef.current = manager.mount(children, undefined, curPageId)
     return () => {
-      manager.unmount(keyRef.current, curPageId)
+      manager.unmount(keyRef.current)
     }
   }, [])
   return null

package/lib/runtime/components/react/mpx-portal/portal-host.tsx

@@ -26,6 +26,7 @@ export type Operation =
 // events
 const addType = 'MPX_RN_ADD_PORTAL'
 const removeType = 'MPX_RN_REMOVE_PORTAL'
+const updateType = 'MPX_RN_UPDATE_PORTAL'
 // fix react native web does not support DeviceEventEmitter
 const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter()
 
@@ -46,6 +47,10 @@ class PortalGuard {
   remove = (key: number) => {
     TopViewEventEmitter.emit(removeType, key)
   }
+
+  update = (key: number, e: ReactNode) => {
+    TopViewEventEmitter.emit(updateType, key, e)
+  }
 }
 /**
  * portal
@@ -57,6 +62,7 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
   const _queue = useRef<Operation[]>([])
   const _addType = useRef<EventSubscription | null>(null)
   const _removeType = useRef<EventSubscription | null>(null)
+  const _updateType = useRef<EventSubscription | null>(null)
   const manager = useRef<PortalManagerContextValue | null>(null)
   let currentPageId: number | undefined
   const _mount = (children: ReactNode, _key?: number, curPageId?: number) => {
@@ -68,26 +74,17 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     const key = _key || _nextKey.current++
     if (manager.current) {
       manager.current.mount(key, children)
-    } else {
-      _queue.current.push({ type: 'mount', key, children })
     }
     return key
   }
 
-  const _unmount = (key: number, curPageId?: number) => {
-    const navigation = getFocusedNavigation()
-    const pageId = navigation?.pageId
-    if (pageId !== (curPageId ?? currentPageId)) {
-      return
-    }
+  const _unmount = (key: number) => {
     if (manager.current) {
       manager.current.unmount(key)
-    } else {
-      _queue.current.push({ type: 'unmount', key })
     }
   }
 
-  const _update = (key: number, children: ReactNode, curPageId?: number) => {
+  const _update = (key: number, children?: ReactNode, curPageId?: number) => {
     const navigation = getFocusedNavigation()
     const pageId = navigation?.pageId
     if (pageId !== (curPageId ?? currentPageId)) {
@@ -95,17 +92,6 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     }
     if (manager.current) {
       manager.current.update(key, children)
-    } else {
-      const op: Operation = { type: 'mount', key, children }
-      const index = _queue.current.findIndex(
-        (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)
-      )
-
-      if (index > -1) {
-        _queue.current[index] = op
-      } else {
-        _queue.current.push(op)
-      }
     }
   }
 
@@ -113,29 +99,13 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
     const navigation = getFocusedNavigation()
     currentPageId = navigation?.pageId
     _addType.current = TopViewEventEmitter.addListener(addType, _mount)
-    _removeType.current = TopViewEventEmitter.addListener(
-      removeType,
-      _unmount
-    )
+    _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount)
+    _updateType.current = TopViewEventEmitter.addListener(updateType, _update)
+
     return () => {
-      while (_queue.current.length && manager.current) {
-        const action = _queue.current.pop()
-        if (!action) {
-          continue
-        }
-        // tslint:disable-next-line:switch-default
-        switch (action.type) {
-          case 'mount':
-            manager.current?.mount(action.key, action.children)
-            break
-          case 'update':
-            manager.current?.update(action.key, action.children)
-            break
-          case 'unmount':
-            manager.current?.unmount(action.key)
-            break
-        }
-      }
+      _addType.current?.remove()
+      _removeType.current?.remove()
+      _updateType.current?.remove()
     }
   }, [])
   return (
@@ -146,7 +116,6 @@ const PortalHost = ({ children } :PortalHostProps): JSX.Element => {
         unmount: _unmount
       }}
       >
-      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
       <View style={styles.container} collapsable={false}>
         {children}
       </View>

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

@@ -25,5 +25,6 @@ const Portal = ({ children }:PortalProps): JSX.Element => {
 Portal.Host = PortalHost
 Portal.add = portal.add
 Portal.remove = portal.remove
+Portal.update = portal.update
 
 export default Portal