@mpxjs/webpack-plugin 2.9.70-alpha.0 → 2.9.70-alpha.1

package/lib/index.js

@@ -1880,7 +1880,7 @@ try {
             if (tenonStyleLoaderIndex > -1 && !isPitcherRequest) {
               loaders.splice(tenonStyleLoaderIndex + 1, 0, {
                 loader: normalize.lib('style-compiler/index.js'),
-                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+                options: (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
               })
             }
           } else if (mpxStyleLoaderIndex === -1) {

package/lib/loader.js

@@ -135,7 +135,6 @@ module.exports = function (content) {
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
 
-
       if (mode === 'tenon') {
         let output = ''
         if (ctorType === 'app' && !queryObj.app) {

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

@@ -8,4 +8,8 @@ export const PickerContext = createContext(null);
 export const VarContext = createContext({});
 export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
+export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
+export const ScrollViewContext = createContext({ gestureRef: null });
+export const PortalContext = createContext(null);
+export const PortalManagerContext = createContext(null);

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

@@ -82,8 +82,8 @@ function checkIsNeedPress(e, type, ref) {
     const nativeEvent = e.nativeEvent;
     const currentPageX = nativeEvent.changedTouches[0].pageX;
     const currentPageY = nativeEvent.changedTouches[0].pageY;
-    if (Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
-        Math.abs(currentPageY - tapDetailInfo.y) > 1) {
+    if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
+        Math.abs(currentPageY - tapDetailInfo.y) > 3) {
         ref.current.needPress[type] = false;
         ref.current.startTimer[type] &&
             clearTimeout(ref.current.startTimer[type]);
@@ -213,7 +213,6 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
     const eventConfig = {};
     const config = rawConfig || {
         layoutRef: { current: {} },
-        disableTouch: false,
         disableTap: false
     };
     const removeProps = [
@@ -237,10 +236,10 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
             rawEventKeys.push(key);
         }
     }
-    if (!rawEventKeys.length || config.disableTouch) {
-        return omit(propsRef.current, removeProps);
-    }
     const events = useMemo(() => {
+        if (!rawEventKeys.length) {
+            return {};
+        }
         const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
             if (propsRef.current[key]) {
                 return acc.concat(eventConfig[key]);

package/lib/runtime/components/react/dist/locale-provider.jsx

@@ -0,0 +1,15 @@
+import { createContext, useMemo, memo } from 'react';
+import { extendObject } from './utils';
+export const LocaleContext = createContext(undefined);
+const LocaleProvider = (props) => {
+    const locale = useMemo(() => {
+        return {
+            antLocale: extendObject({}, props.locale, { exist: true })
+        };
+    }, [props.locale]);
+    return (<LocaleContext.Provider value={locale}>
+      {props.children}
+    </LocaleContext.Provider>);
+};
+LocaleProvider.displayName = 'LocaleProvider';
+export default memo(LocaleProvider);

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

@@ -34,10 +34,11 @@
  * ✘ bindagreeprivacyauthorization
  * ✔ bindtap
  */
-import { createElement, useEffect, useRef, useState, forwardRef, useContext } from 'react';
+import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
 import { View, StyleSheet, Animated, Easing } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHoverStyle } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -128,20 +129,16 @@ const Loading = ({ alone = false }) => {
 };
 const Button = forwardRef((buttonProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(buttonProps);
-    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap, bindtouchstart, bindtouchend } = props;
+    const { size = 'default', type = 'default', plain = false, disabled = false, loading = false, 'hover-class': hoverClass, 'hover-style': hoverStyle = {}, 'hover-start-time': hoverStartTime = 20, 'hover-stay-time': hoverStayTime = 70, 'open-type': openType, 'form-type': formType, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, style = {}, children, bindgetuserinfo, bindtap } = props;
     const pageId = useContext(RouteContext);
     const formContext = useContext(FormContext);
+    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled });
     let submitFn;
     let resetFn;
     if (formContext) {
         submitFn = formContext.submit;
         resetFn = formContext.reset;
     }
-    const refs = useRef({
-        hoverStartTimer: undefined,
-        hoverStayTimer: undefined
-    });
-    const [isHover, setIsHover] = useState(false);
     const isMiniSize = size === 'mini';
     const applyHoverEffect = isHover && hoverClass !== 'none';
     const [color, hoverColor, plainColor, disabledColor] = TypeColorMap[type];
@@ -224,32 +221,6 @@ const Button = forwardRef((buttonProps, ref) => {
             });
         }
     };
-    const setStayTimer = () => {
-        clearTimeout(refs.current.hoverStayTimer);
-        refs.current.hoverStayTimer = setTimeout(() => {
-            setIsHover(false);
-            clearTimeout(refs.current.hoverStayTimer);
-        }, hoverStayTime);
-    };
-    const setStartTimer = () => {
-        clearTimeout(refs.current.hoverStartTimer);
-        refs.current.hoverStartTimer = setTimeout(() => {
-            setIsHover(true);
-            clearTimeout(refs.current.hoverStartTimer);
-        }, hoverStartTime);
-    };
-    const onTouchStart = (evt) => {
-        bindtouchstart && bindtouchstart(evt);
-        if (disabled)
-            return;
-        setStartTimer();
-    };
-    const onTouchEnd = (evt) => {
-        bindtouchend && bindtouchend(evt);
-        if (disabled)
-            return;
-        setStayTimer();
-    };
     const handleFormTypeFn = () => {
         if (formType === 'submit') {
             submitFn && submitFn();
@@ -269,8 +240,6 @@ const Button = forwardRef((buttonProps, ref) => {
         ref: nodeRef,
         style: extendObject({}, innerStyle, layoutStyle)
     }, layoutProps, {
-        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
-        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
         bindtap: !disabled && onTap
     }), [
         'disabled',
@@ -288,12 +257,15 @@ const Button = forwardRef((buttonProps, ref) => {
         layoutRef,
         disableTap: disabled
     });
-    return createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
+    const baseButton = createElement(View, innerProps, loading && createElement(Loading, { alone: !children }), wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current,
         textStyle,
         textProps
     }));
+    return enableHoverStyle
+        ? createElement(GestureDetector, { gesture }, baseButton)
+        : baseButton;
 });
 Button.displayName = 'MpxButton';
 export default Button;

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

@@ -268,14 +268,8 @@ const Image = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    return createElement(View, innerProps, isSvg
-        ? createElement(SvgCssUri, {
-            uri: src,
-            onLayout: onSvgLoad,
-            onError: binderror && onSvgError,
-            style: extendObject({ transformOrigin: 'top left' }, modeStyle)
-        })
-        : loaded && renderImage({
+    const createBaseImage = (innerProps = {}) => {
+        return renderImage(extendObject({
             source: { uri: src },
             resizeMode: resizeMode,
             onLoad: bindload && onImageLoad,
@@ -285,7 +279,17 @@ const Image = forwardRef((props, ref) => {
                 width: isCropMode ? imageWidth : '100%',
                 height: isCropMode ? imageHeight : '100%'
             }, isCropMode ? modeStyle : {})
-        }, enableFastImage));
+        }, innerProps), enableFastImage);
+    };
+    const SvgImage = createElement(View, innerProps, createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
+        style: extendObject({ transformOrigin: 'top left' }, modeStyle)
+    }));
+    const BaseImage = createBaseImage(innerProps);
+    const LayoutImage = createElement(View, innerProps, loaded && createBaseImage());
+    return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
 });
 Image.displayName = 'mpx-image';
 export default Image;

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

@@ -54,7 +54,7 @@ const keyboardTypeMap = {
     }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, '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, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, '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 = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);

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

@@ -11,7 +11,7 @@
  * ✘ scale-min
  * ✘ scale-max
  * ✘ scale-value
- * ✘ animation
+ * ✔ animation
  * ✔ bindchange
  * ✘ bindscale
  * ✔ htouchmove

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView, Portal } from '@ant-design/react-native';
+import Portal from '../mpx-portal';
+import { PickerView } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。

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

@@ -3,7 +3,7 @@ import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValu
 import { wrapChildren, extendObject } from './utils';
 import { createFaces } from './pickerFaces';
 import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
-const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
+const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
     const offsetYShared = usePickerViewColumnAnimationContext();
     const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
     useEffect(() => {

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

@@ -1,8 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { vibrateShort } from '@mpxjs/api-proxy';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, useDebounceCallback, useStableCallback } from './utils';
 import useNodesRef from './useNodesRef';
 import PickerOverlay from './pickerViewOverlay';
 import PickerMask from './pickerViewMask';
@@ -21,11 +20,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         style: normalStyle
     });
     const { height: pickerH, itemHeight } = wrapperStyle;
-    const [scrollViewWidth, setScrollViewWidth] = useState('100%');
-    const [itemRawW, setItemRawW] = useState('100%');
     const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
-    const maxScrollViewWidth = useRef(-1);
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
@@ -39,13 +35,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         setHeight,
         nodeRef: scrollViewRef
     });
-    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length)
-    // const initialOffset = useMemo(() => ({
-    //   x: 0,
-    //   y: itemRawH * initialIndex
-    // }), [itemRawH])
+    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
-    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
     }, [paddingHeight]);
@@ -53,6 +45,26 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         const calc = Math.round(y / itemRawH);
         return Math.max(0, Math.min(calc, maxIndex));
     }, [itemRawH, maxIndex]);
+    const getYofIndex = useCallback((index) => {
+        return index * itemRawH;
+    }, [itemRawH]);
+    const stableResetScrollPosition = useStableCallback((y) => {
+        // console.log('[mpx-picker-view-column], reset --->', 'columnIndex=', columnIndex, 'y=', y, touching.current, scrolling.current, itemRawH, 'snapToOffsets=', snapToOffsets)
+        if (touching.current || scrolling.current) {
+            return;
+        }
+        // needReset.current = true
+        if (y % itemRawH !== 0) {
+            scrolling.current = true;
+            const targetIndex = getIndex(y);
+            const targetY = getYofIndex(targetIndex);
+            scrollViewRef.current?.scrollTo({ x: 0, y: targetY, animated: false });
+        }
+        else {
+            onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+        }
+    });
+    const debounceResetScrollPosition = useDebounceCallback(stableResetScrollPosition, 10);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -64,80 +76,68 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
-        // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
         setTimeout(() => {
             scrollViewRef.current?.scrollTo({
                 x: 0,
-                y: itemRawH * initialIndex,
+                y: getYofIndex(initialIndex),
                 animated: false
             });
-        }, 0);
+        }, isAndroid ? 200 : 0);
         activeIndex.current = initialIndex;
     }, [itemRawH, initialIndex]);
     const onContentSizeChange = (_w, h) => {
-        const y = itemRawH * initialIndex;
-        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y)
+        const y = getYofIndex(initialIndex);
         if (y <= h) {
             setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
             }, 0);
         }
     };
-    const onScrollViewLayout = (e) => {
-        const { width } = e.nativeEvent.layout;
-        const widthInt = Math.ceil(width);
-        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
-        if (widthInt !== scrollViewWidth) {
-            const maxW = maxScrollViewWidth.current;
-            if (maxW !== -1 && widthInt > maxW) {
-                return;
-            }
-            if (maxW === -1) {
-                maxScrollViewWidth.current = Math.ceil(widthInt * 1.5);
-            }
-            setScrollViewWidth(widthInt);
-        }
-        if (itemRawW === '100%') {
-            setItemRawW(widthInt);
-        }
-    };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
-        if (rawH && itemRawH !== rawH) {
-            setItemRawH(rawH);
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
         }
     };
-    const onTouchStart = () => {
+    const onScrollBeginDrag = () => {
+        isIOS && debounceResetScrollPosition.clear();
         touching.current = true;
         prevScrollingInfo.current = {
             index: activeIndex.current,
-            y: activeIndex.current * itemRawH
+            y: getYofIndex(activeIndex.current)
         };
     };
-    const onTouchEnd = () => {
-        touching.current = false;
-    };
-    const onTouchCancel = () => {
+    const onScrollEndDrag = (e) => {
         touching.current = false;
+        const { y } = e.nativeEvent.contentOffset;
+        if (isIOS) {
+            if (y >= 0 && y <= snapToOffsets[maxIndex]) {
+                debounceResetScrollPosition(y);
+            }
+        }
     };
     const onMomentumScrollBegin = () => {
+        isIOS && debounceResetScrollPosition.clear();
         scrolling.current = true;
     };
     const onMomentumScrollEnd = (e) => {
         scrolling.current = false;
-        if (!itemRawH) {
-            return;
-        }
         const { y: scrollY } = e.nativeEvent.contentOffset;
-        let calcIndex = Math.round(scrollY / itemRawH);
-        activeIndex.current = calcIndex;
-        if (calcIndex !== initialIndex) {
-            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
+        // console.log('[mpx-picker-view-column], onMomentumScrollEnd --->', 'columnIndex=', columnIndex, scrollY, itemRawH)
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return debounceResetScrollPosition(scrollY);
+        }
+        const calcIndex = getIndex(scrollY);
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
             onSelectChange(calcIndex);
         }
     };
     const onScroll = (e) => {
-        if (Platform.OS === 'android') {
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
             return;
         }
         const { y } = e.nativeEvent.contentOffset;
@@ -148,19 +148,20 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 if (currentId !== prevIndex) {
                     prevScrollingInfo.current = {
                         index: currentId,
-                        y: currentId * itemRawH
+                        y: getYofIndex(currentId)
                     };
-                    vibrateShort({ type: 'selection' });
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
                 }
             }
         }
     };
     const renderInnerchild = () => columnData.map((item, index) => {
-        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} itemWidth={itemRawW} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: scrollViewWidth }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onLayout={onScrollViewLayout} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
           {renderInnerchild()}
         </Reanimated.ScrollView>
       </PickerViewColumnAnimationContext.Provider>);

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

@@ -45,7 +45,7 @@ const _PickerView = forwardRef((props, ref) => {
     };
     const onInitialChange = (isInvalid, value) => {
         if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
-            console.log('[mpx-picker-view], onInitialChange-1 ===> value=', value);
+            console.log('[mpx-picker-view], onInitialChange ===> value=', value);
             const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
             bindchange?.(eventData);
             snapActiveValueRef.current = value.slice();

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

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { getFocusedNavigation } from '@mpxjs/utils';
+const PortalConsumer = ({ manager, children }) => {
+    const keyRef = useRef(null);
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        manager.update(keyRef.current, children, curPageId);
+    }, [children]);
+    useEffect(() => {
+        if (!manager) {
+            throw new Error('Looks like you forgot to wrap your root component with `Provider` component from `@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal`.\n\n');
+        }
+        const navigation = getFocusedNavigation();
+        const curPageId = navigation?.pageId;
+        keyRef.current = manager.mount(children, undefined, curPageId);
+        return () => {
+            manager.unmount(keyRef.current, curPageId);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

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

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+import { View, DeviceEventEmitter, NativeEventEmitter, StyleSheet } from 'react-native';
+import PortalManager from './portal-manager';
+import { getFocusedNavigation } from '@mpxjs/utils';
+import { PortalContext } from '../context';
+// events
+const addType = 'MPX_RN_ADD_PORTAL';
+const removeType = 'MPX_RN_REMOVE_PORTAL';
+// fix react native web does not support DeviceEventEmitter
+const TopViewEventEmitter = DeviceEventEmitter || new NativeEventEmitter();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    }
+});
+class PortalGuard {
+    nextKey = 10000;
+    add = (e) => {
+        const key = this.nextKey++;
+        TopViewEventEmitter.emit(addType, e, key);
+        return key;
+    };
+    remove = (key) => {
+        TopViewEventEmitter.emit(removeType, key);
+    };
+}
+/**
+ * portal
+ */
+export const portal = new PortalGuard();
+const PortalHost = ({ children }) => {
+    const _nextKey = useRef(0);
+    const _queue = useRef([]);
+    const _addType = useRef(null);
+    const _removeType = useRef(null);
+    const manager = useRef(null);
+    let currentPageId;
+    const _mount = (children, _key, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        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, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.unmount(key);
+        }
+        else {
+            _queue.current.push({ type: 'unmount', key });
+        }
+    };
+    const _update = (key, children, curPageId) => {
+        const navigation = getFocusedNavigation();
+        const pageId = navigation?.pageId;
+        if (pageId !== (curPageId ?? currentPageId)) {
+            return;
+        }
+        if (manager.current) {
+            manager.current.update(key, children);
+        }
+        else {
+            const op = { 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);
+            }
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        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;
+                }
+            }
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;

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

@@ -0,0 +1,40 @@
+import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet } from 'react-native';
+const _PortalManager = forwardRef((props, ref) => {
+    const [state, setState] = useState({
+        portals: []
+    });
+    const mount = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: [...prevState.portals, { key, children }]
+        }));
+    }, [state]);
+    const update = useCallback((key, children) => {
+        setState((prevState) => ({
+            portals: prevState.portals.map((item) => {
+                if (item.key === key) {
+                    return { ...item, children };
+                }
+                return item;
+            })
+        }));
+    }, [state]);
+    const unmount = useCallback((key) => {
+        setState((prevState) => ({
+            portals: prevState.portals.filter((item) => item.key !== key)
+        }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        mount,
+        update,
+        unmount,
+        portals: state.portals
+    }));
+    return (<>
+      {state.portals.map(({ key, children }, i) => (<View key={key} collapsable={false} // Need collapsable=false here to clip the elevations
+         pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}>
+          {children}
+        </View>))}
+    </>);
+});
+export default _PortalManager;