@mpxjs/webpack-plugin 2.10.15 → 2.10.16-beta.2

package/lib/resolver/AddEnvPlugin.js

@@ -16,6 +16,8 @@ module.exports = class AddEnvPlugin {
   apply (resolver) {
     const target = resolver.ensureHook(this.target)
     const env = this.env
+    const envPattern = new RegExp(`\\.${env}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddEnvPlugin', (request, resolveContext, callback) => {
       if (request.env) {
         return callback()
@@ -32,11 +34,22 @@ module.exports = class AddEnvPlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, this.fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       queryObj.infix = `${queryObj.infix || ''}.${env}`
+
+      const resourceBasename = path.basename(resourcePath)
+      // 如果 infix 与 resourcePath 无法匹配，则认为未命中env
+      if (envPattern.test(resourceBasename) && resourceBasename.includes(queryObj.infix)) {
+        request.query = stringifyQuery(queryObj)
+        request.env = obj.env
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, env, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, env, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add env: ' + env, resolveContext, callback)
     })
   }

package/lib/resolver/AddModePlugin.js

@@ -17,6 +17,9 @@ module.exports = class AddModePlugin {
     const target = resolver.ensureHook(this.target)
     const { options = {}, mode } = this
     const { defaultMode, fileConditionRules, implicitMode } = options
+    const modePattern = new RegExp(`\\.${mode}(\\.|$)`)
+    const defaultModePattern = new RegExp(`\\.${defaultMode}(\\.|$)`)
+
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
       if (request.mode || request.env) {
         return callback()
@@ -33,13 +36,28 @@ module.exports = class AddModePlugin {
       }
       // 当前资源没有后缀名或者路径不符合fileConditionRules规则时，直接返回
       if (!extname || !matchCondition(resourcePath, fileConditionRules)) return callback()
+
       const queryObj = parseQuery(request.query || '?')
       const queryInfix = queryObj.infix
       if (!implicitMode) queryObj.mode = mode
       queryObj.infix = `${queryInfix || ''}.${mode}`
+
+      // 如果已经确认是mode后缀的文件，添加query与mode后直接返回
+      if (modePattern.test(path.basename(resourcePath))) {
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      } else if (defaultMode && defaultModePattern.test(path.basename(resourcePath))) {
+        queryObj.infix = `${queryInfix || ''}.${defaultMode}`
+        request.query = stringifyQuery(queryObj)
+        request.mode = obj.mode
+        return callback()
+      }
+
       obj.query = stringifyQuery(queryObj)
       obj.path = addInfix(resourcePath, mode, extname)
       obj.relativePath = request.relativePath && addInfix(request.relativePath, mode, extname)
+
       resolver.doResolve(target, Object.assign({}, request, obj), 'add mode: ' + mode, resolveContext, (err, result) => {
         if (defaultMode && !result) {
           queryObj.infix = `${queryInfix || ''}.${defaultMode}`

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

@@ -84,3 +84,5 @@ export const ScrollViewContext = createContext<ScrollViewContextValue>({ gesture
 export const PortalContext = createContext<PortalContextValue>(null as any)
 
 export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })
+
+export const ProviderContext = createContext(null)

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

@@ -15,3 +15,4 @@ export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
 export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });
+export const ProviderContext = createContext(null);

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

@@ -0,0 +1,102 @@
+import React, { forwardRef, useRef, useCallback, useContext, useState, useEffect } from 'react';
+import { Camera, useCameraDevice, useCodeScanner, useCameraFormat } from 'react-native-vision-camera';
+import { getCustomEvent } from './getInnerListeners';
+import { RouteContext } from './context';
+const _camera = forwardRef((props, ref) => {
+    const cameraRef = useRef(null);
+    const { mode = 'normal', resolution = 'medium', devicePosition = 'back', flash = 'auto', frameSize = 'medium', bindinitdone, bindstop, bindscancode } = props;
+    const isPhoto = mode === 'normal';
+    const device = useCameraDevice(devicePosition || 'back');
+    const { navigation } = useContext(RouteContext) || {};
+    const [zoomValue, setZoomValue] = useState(1);
+    const [hasPermission, setHasPermission] = useState(null);
+    // 先定义常量，避免在条件判断后使用
+    const maxZoom = device?.maxZoom || 1;
+    const RESOLUTION_MAPPING = {
+        low: { width: 640, height: 480 },
+        medium: { width: 1280, height: 720 },
+        high: { width: 1920, height: 1080 }
+    };
+    const FRAME_SIZE_MAPPING = {
+        small: { width: 480, height: 360 },
+        medium: { width: 720, height: 540 },
+        large: { width: 1080, height: 810 }
+    };
+    // 所有 Hooks 必须在条件判断之前调用
+    const format = useCameraFormat(device, [
+        {
+            photoResolution: RESOLUTION_MAPPING[resolution],
+            videoResolution: FRAME_SIZE_MAPPING[frameSize] || RESOLUTION_MAPPING[resolution]
+        }
+    ]);
+    const codeScanner = useCodeScanner({
+        codeTypes: ['qr', 'ean-13'],
+        onCodeScanned: (codes) => {
+            const result = codes.map(code => code.value).join(',');
+            bindscancode && bindscancode(getCustomEvent('scancode', {}, {
+                detail: {
+                    result: codes.map(code => code.value).join(',')
+                }
+            }));
+        }
+    });
+    const onInitialized = useCallback(() => {
+        bindinitdone && bindinitdone(getCustomEvent('initdone', {}, {
+            detail: {
+                maxZoom
+            }
+        }));
+    }, [bindinitdone, maxZoom]);
+    const onStopped = useCallback(() => {
+        bindstop && bindstop();
+    }, [bindstop]);
+    // 检查相机权限
+    useEffect(() => {
+        const checkCameraPermission = async () => {
+            try {
+                const cameraPermission = global?.__mpx?.config?.rnConfig?.cameraPermission;
+                if (typeof cameraPermission === 'function') {
+                    const permissionResult = await cameraPermission();
+                    setHasPermission(permissionResult === true);
+                }
+                else {
+                    setHasPermission(true);
+                }
+            }
+            catch (error) {
+                setHasPermission(false);
+            }
+        };
+        checkCameraPermission();
+    }, []);
+    const camera = {
+        setZoom: (zoom) => {
+            setZoomValue(zoom);
+        },
+        getTakePhoto: () => {
+            return cameraRef.current?.takePhoto;
+        },
+        getStartRecord: () => {
+            return cameraRef.current?.startRecording;
+        },
+        getStopRecord: () => {
+            return cameraRef.current?.stopRecording;
+        }
+    };
+    if (navigation) {
+        navigation.camera = camera;
+    }
+    // 所有 Hooks 调用完成后再进行条件判断
+    if (hasPermission === null) {
+        return null;
+    }
+    if (!hasPermission) {
+        return null;
+    }
+    if (!device) {
+        return null;
+    }
+    return (<Camera ref={cameraRef} isActive={true} photo={isPhoto} video={true} onInitialized={onInitialized} onStopped={onStopped} device={device} flash={flash} format={format} codeScanner={!isPhoto ? codeScanner : undefined} style={{ flex: 1 }} zoom={zoomValue} {...props}/>);
+});
+_camera.displayName = 'MpxCamera';
+export default _camera;

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

@@ -40,7 +40,16 @@ const ModeMap = new Map([
     ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
-const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+const relativeCenteredSize = (viewSize, imageSize) => {
+    return (viewSize - imageSize) / 2;
+};
+// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
+function getFitScale(width1, height1, width2, height2) {
+    return Math.min(width2 / width1, height2 / height1);
+}
+function getFillScale(width1, height1, width2, height2) {
+    return Math.max(width2 / width1, height2 / height1);
+}
 function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
     const isMeetSize = viewWidth && viewHeight && ratio;
     if (isSvg && !isMeetSize)
@@ -49,6 +58,16 @@ function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
         return true;
     return false;
 }
+const getFixedWidth = (viewWidth, viewHeight, ratio) => {
+    if (!ratio)
+        return viewWidth;
+    const fixed = viewHeight / ratio;
+    return !fixed ? viewWidth : fixed;
+};
+const getFixedHeight = (viewWidth, viewHeight, ratio) => {
+    const fixed = viewWidth * ratio;
+    return !fixed ? viewHeight : fixed;
+};
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
     const defaultStyle = {
@@ -56,7 +75,6 @@ const Image = forwardRef((props, ref) => {
         height: DEFAULT_IMAGE_HEIGHT
     };
     const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
-    const state = useRef({});
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         defaultStyle
@@ -70,13 +88,19 @@ const Image = forwardRef((props, ref) => {
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
+        // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
+        if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
+            if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+                if (!loaded)
+                    setLoaded(true);
+            }
+            return;
+        }
         if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-            setViewWidth(width);
-            setViewHeight(height);
             setRatio(state.current.ratio);
             setImageWidth(state.current.imageWidth);
             setImageHeight(state.current.imageHeight);
-            state.current = {};
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
             setLoaded(true);
         }
     };
@@ -96,43 +120,56 @@ const Image = forwardRef((props, ref) => {
     const [imageHeight, setImageHeight] = useState(0);
     const [ratio, setRatio] = useState(0);
     const [loaded, setLoaded] = useState(!isLayoutMode);
-    const fixedHeight = useMemo(() => {
-        const fixed = viewWidth * ratio;
-        return !fixed ? viewHeight : fixed;
-    }, [ratio, viewWidth, viewHeight]);
-    const fixedWidth = useMemo(() => {
-        if (!ratio)
-            return viewWidth;
-        const fixed = viewHeight / ratio;
-        return !fixed ? viewWidth : fixed;
-    }, [ratio, viewWidth, viewHeight]);
+    const state = useRef({
+        viewWidth,
+        viewHeight
+    });
+    function setViewSize(viewWidth, viewHeight, ratio) {
+        // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
+        switch (mode) {
+            case 'widthFix': {
+                setViewWidth(viewWidth);
+                const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio);
+                setViewHeight(fixedHeight);
+                break;
+            }
+            case 'heightFix': {
+                setViewHeight(viewHeight);
+                const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio);
+                setViewWidth(fixedWidth);
+                break;
+            }
+            default:
+                setViewHeight(viewHeight);
+                setViewWidth(viewWidth);
+                break;
+        }
+    }
     const modeStyle = useMemo(() => {
         if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
             return {};
         switch (mode) {
-            case 'scaleToFill':
+            case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
             case 'aspectFit':
                 if (isSvg) {
-                    const scale = ratio <= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
                 return {};
             case 'aspectFill':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
@@ -140,9 +177,7 @@ const Image = forwardRef((props, ref) => {
             case 'widthFix':
             case 'heightFix':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
-                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [{ scale }]
                     };
@@ -205,12 +240,23 @@ const Image = forwardRef((props, ref) => {
             default:
                 return {};
         }
-    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio]);
     const onSvgLoad = (evt) => {
         const { width, height } = evt.nativeEvent.layout;
-        setRatio(!width ? 0 : height / width);
-        setImageWidth(width);
+        state.current.imageHeight = height;
         setImageHeight(height);
+        state.current.ratio = !width ? 0 : height / width;
+        if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+                ? state.current.viewHeight
+                : state.current.viewWidth && state.current.viewHeight) {
+            setRatio(state.current.ratio);
+            setImageWidth(width);
+            setImageHeight(height);
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+            setLoaded(true);
+        }
         bindload && bindload(getCustomEvent('load', evt, {
             detail: { width, height },
             layoutRef
@@ -248,12 +294,10 @@ const Image = forwardRef((props, ref) => {
                     : isHeightFixMode
                         ? state.current.viewHeight
                         : state.current.viewWidth && state.current.viewHeight) {
-                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
-                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
-                    setRatio(!width ? 0 : height / width);
+                    setRatio(state.current.ratio);
                     setImageWidth(width);
                     setImageHeight(height);
-                    state.current = {};
+                    setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
                     setLoaded(true);
                 }
             }, () => {
@@ -263,7 +307,7 @@ const Image = forwardRef((props, ref) => {
     }, [src, isSvg, isLayoutMode]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
     }), [
         'src',
         'mode',

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

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
@@ -9,14 +9,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + cancelAnimation 来优化
+    const isShow = useRef(false);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: -offset.value }],
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -30,8 +39,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         if (isIOS) {
             subscriptions = [
                 Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     setTimeout(() => {
@@ -40,6 +51,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            cancelAnimation(offset);
                             offset.value = withTiming(value, { duration, easing }, (finished) => {
                                 if (finished) {
                                     // Set flexBasic after animation to trigger re-layout and reset layout information
@@ -55,8 +67,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         else {
             subscriptions = [
                 Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
+                    if (!keyboardAvoid?.current || isShow.current) {
                         return;
+                    }
+                    isShow.current = true;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     ref?.current?.measure((x, y, width, height, pageX, pageY) => {
@@ -65,6 +79,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                         const belowValue = Math.min(belowOffset, cursorSpacing);
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
+                        cancelAnimation(offset);
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information

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

@@ -17,7 +17,7 @@ const styles = {
 };
 const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
@@ -75,7 +75,8 @@ const _PickerView = forwardRef((props, ref) => {
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
             pickerIndicatorStyle,
-            pickerMaskStyle
+            pickerMaskStyle,
+            enableWheelAnimation
         });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({

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

@@ -5,12 +5,13 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
-import MpxPickerVIewColumnItem from './pickerViewColumnItem';
+import MpxPickerViewColumnItem from './pickerViewColumnItem';
+import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite';
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
 import { calcHeightOffsets } from './pickerViewFaces';
 const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle = {} } = splitStyle(normalStyle);
     const { textProps = {} } = splitProps(props);
@@ -217,7 +218,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     }, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
     const renderInnerchild = () => columnData.map((item, index) => {
-        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+        return enableWheelAnimation
+            ? (<MpxPickerViewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>)
+            : (<MpxPickerViewColumnItemLite key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         const innerProps = extendObject({}, layoutProps, {
@@ -246,9 +249,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
     return (<View style={[styles.wrapper, normalStyle]}>
-        {renderScollView()}
-        {renderMask()}
-        {renderIndicator()}
+      {renderScollView()}
+      {renderMask()}
+      {renderIndicator()}
     </View>);
 });
 const styles = StyleSheet.create({

package/lib/runtime/components/react/dist/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 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) }
             ]
         };
     });

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/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]);