@mpxjs/webpack-plugin 2.9.69-beta.1 → 2.9.69-beta.11

package/lib/config.js

@@ -138,7 +138,9 @@ module.exports = {
         }
       },
       getEvent (eventName, prefix = 'on') {
-        return dash2hump(prefix + '-' + eventName)
+        return prefix + dash2hump(eventName.replace(/^./, (matched) => {
+          return matched.toUpperCase()
+        }))
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',

package/lib/platform/template/wx/index.js

@@ -302,7 +302,9 @@ module.exports = function getSpec ({ warn, error }) {
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ali' })
           const rEventName = runRules(eventRules, eventName, { mode: 'ali' })
           return {
-            name: dash2hump(rPrefix + '-' + rEventName) + modifierStr,
+            name: rPrefix + dash2hump(rEventName.replace(/^./, (matched) => {
+              return matched.toUpperCase()
+            })) + modifierStr,
             value
           }
         },

package/lib/react/processScript.js

@@ -14,25 +14,27 @@ module.exports = function (script, {
   localPagesMap
 }, callback) {
   let scriptSrcMode = srcMode
+  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
     script = { tag: 'script' }
   }
-
   let output = '/* script */\n'
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
-import { Provider } from '@ant-design/react-native'
+${mode === 'ios' ? "import { createNativeStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'" }
+import { useHeaderHeight } from '@react-navigation/elements';
+import Provider from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-provider'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
+  createStackNavigator: ${mode === 'ios' ? 'createNativeStackNavigator' : 'createStackNavigator'},
+  useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,

package/lib/runtime/components/react/context.ts

@@ -32,6 +32,19 @@ export interface IntersectionObserver {
     throttleMeasure: () => void
   }
 }
+export interface PortalManagerContextValue {
+  mount: (key: number, children: React.ReactNode) => void
+  update: (key: number, children: React.ReactNode) => void
+  unmount: (key: number) => void,
+  portals: Array<{key: number, children: React.ReactNode}>
+}
+
+export interface PortalContextValue {
+  mount: (children: React.ReactNode, key?: number, pageId?: number|null) => number| undefined
+  update: (key: number, children: React.ReactNode, pageId?: number|null) => void
+  unmount: (key: number) => void
+  manager?: PortalManagerContextValue
+}
 
 export interface ScrollViewContextValue {
    gestureRef: React.RefObject<any> | null
@@ -60,3 +73,7 @@ export const SwiperContext = createContext({})
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
 export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+
+export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const PortalManagerContext = createContext<PortalManagerContextValue| null>(null)

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

@@ -11,3 +11,5 @@ 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]);

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, useHover } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
@@ -128,38 +129,34 @@ 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 enableHover = hoverClass !== 'none';
+    const { isHover, gesture } = useHover({ enableHover, 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];
-    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})`;
     const normalBorderColor = type === 'default' ? 'rgba(0, 0, 0, .2)' : normalBackgroundColor;
     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,
         borderStyle: 'solid',
@@ -169,7 +166,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const defaultViewStyle = extendObject({}, styles.button, isMiniSize ? styles.buttonMini : null, viewStyle);
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
-    const styleObj = extendObject({}, defaultStyle, style, applyHoverEffect ? hoverStyle : {});
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
@@ -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 enableHover
+        ? createElement(GestureDetector, { gesture: 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-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(() => {
@@ -14,8 +14,8 @@ const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFr
         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/dist/mpx-picker-view-column.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { SafeAreaView, StyleSheet } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid } 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';
@@ -20,14 +20,12 @@ 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);
+    const timerScrollTo = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
@@ -39,10 +37,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         nodeRef: scrollViewRef
     });
     // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length, 'pickerH=', pickerH, 'itemRawH=', itemRawH, 'itemHeight=', itemHeight)
-    // const initialOffset = useMemo(() => ({
-    //   x: 0,
-    //   y: itemRawH * initialIndex
-    // }), [itemRawH])
     const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
     const contentContainerStyle = useMemo(() => {
@@ -52,8 +46,38 @@ 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);
+    const clearTimerScrollTo = () => {
+        if (timerScrollTo.current) {
+            clearTimeout(timerScrollTo.current);
+            timerScrollTo.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimerScrollTo();
+        };
+    }, []);
     useEffect(() => {
-        // console.log('[mpx-picker-view-column], useEffect000 --->', 'columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'prevIndex=', prevIndex, 'activeIndex=', activeIndex.current, 'maxIndex=', maxIndex, 'prevMaxIndex=', prevMaxIndex)
         if (!scrollViewRef.current ||
             !itemRawH ||
             touching.current ||
@@ -64,89 +88,69 @@ 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(() => {
+        clearTimerScrollTo();
+        timerScrollTo.current = setTimeout(() => {
             scrollViewRef.current?.scrollTo({
                 x: 0,
-                y: itemRawH * initialIndex,
+                y: getYofIndex(initialIndex),
                 animated: false
             });
         }, 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, 'itemRawH=', itemRawH)
+        const y = getYofIndex(initialIndex);
         if (y <= h) {
-            setTimeout(() => {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
             }, 0);
         }
     };
-    const onScrollViewLayout = (e) => {
-        if (isAndroid) {
-            return;
-        }
-        // RN iOS bug: https://github.com/facebook/react-native/issues/36135
-        const { width } = e.nativeEvent.layout;
-        const widthInt = Math.ceil(width);
-        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'width=', width, '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;
-        // console.log('[mpx-picker-view-column], onItemLayout --->', 'columnIndex=', columnIndex, 'width=', width)
-        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 (isAndroid) {
-            return;
-        }
-        // 全局注册的震动触感 hook
-        const pickerVibrate = global.__mpx.config.rnConfig.pickerVibrate;
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
         if (typeof pickerVibrate !== 'function') {
             return;
         }
@@ -158,7 +162,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 if (currentId !== prevIndex) {
                     prevScrollingInfo.current = {
                         index: currentId,
-                        y: currentId * itemRawH
+                        y: getYofIndex(currentId)
                     };
                     // vibrateShort({ type: 'selection' })
                     pickerVibrate();
@@ -167,11 +171,11 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     };
     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-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);
+        };
+    }, []);
+    return null;
+};
+export default PortalConsumer;

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

@@ -0,0 +1,93 @@
+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';
+const updateType = 'MPX_RN_UPDATE_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);
+    };
+    update = (key, e) => {
+        TopViewEventEmitter.emit(updateType, key, e);
+    };
+}
+/**
+ * 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 _updateType = 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);
+        }
+        return key;
+    };
+    const _unmount = (key) => {
+        if (manager.current) {
+            manager.current.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);
+        }
+    };
+    useEffect(() => {
+        const navigation = getFocusedNavigation();
+        currentPageId = navigation?.pageId;
+        _addType.current = TopViewEventEmitter.addListener(addType, _mount);
+        _removeType.current = TopViewEventEmitter.addListener(removeType, _unmount);
+        _updateType.current = TopViewEventEmitter.addListener(updateType, _update);
+        return () => {
+            _addType.current?.remove();
+            _removeType.current?.remove();
+            _updateType.current?.remove();
+        };
+    }, []);
+    return (<PortalContext.Provider value={{
+            mount: _mount,
+            update: _update,
+            unmount: _unmount
+        }}>
+      <View style={styles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={manager}/>
+    </PortalContext.Provider>);
+};
+export default PortalHost;