@mpxjs/webpack-plugin 2.10.24 → 2.11.0

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

@@ -22,7 +22,7 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThroughValue } from './utils';
+import { useTransformStyle, splitProps, splitStyle, hiddenStyle, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThrough } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
@@ -129,14 +129,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
     const prevWaitForHandlersRef = useRef(waitFor || []);
     const gestureSwitch = useRef(false);
     const { textStyle, innerStyle } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const offsetX = useSharedValue(x);
     const offsetY = useSharedValue(y);
     const startPosition = useSharedValue({
@@ -564,7 +564,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
         return handlers;
     };
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? hiddenStyle : {};
     // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
     // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
     const filterProps = omit(props, [
@@ -599,7 +599,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         'changeThrottleTime',
         'bindchange'
     ]);
-    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props.children, {
         hasVarDec,
         varContext: varContextRef.current,
         textPassThrough

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

@@ -86,7 +86,7 @@ const MpxNav = memo(({ pageConfig, navigation }) => {
     };
     const isCustom = innerPageConfig.navigationStyle === 'custom';
     const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle]);
-    // 状态栏的颜色
+    // 状态栏由 MpxNav 根据页面配置统一控制，避免 native-stack screenOptions 在页面切换时覆盖页面级配置。
     const statusBarElement = (<StatusBar translucent backgroundColor='transparent' barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>);
     if (isCustom)
         return statusBarElement;

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

@@ -6,10 +6,11 @@ import PickerMultiSelector from './multiSelector';
 import PickerTime from './time';
 import PickerDate from './date';
 import PickerRegion from './region';
+import Portal from '../mpx-portal';
 import { FormContext, RouteContext } from '../context';
 import useNodesRef from '../useNodesRef';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
-import { extendObject, useLayout } from '../utils';
+import { extendObject, splitProps, splitStyle, useLayout, useTextPassThrough, useTransformStyle, wrapChildren } from '../utils';
 import { createPopupManager } from '../mpx-popup';
 /**
  * ✔ mode
@@ -103,27 +104,48 @@ const buttonTextMap = {
         confirm: 'Confirm'
     }
 };
-const Picker = forwardRef((props, ref) => {
-    const { mode, value, range = null, children, disabled, bindcancel, bindchange, 'header-text': headerText = '' } = props;
+const Picker = forwardRef((pickerProps, ref) => {
+    const { textProps, innerProps: splitInnerProps } = splitProps(pickerProps);
+    const props = (splitInnerProps || {});
+    const { mode, value, range = [], children, disabled, bindcancel, bindchange, 'header-text': headerText = '', style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const modalProps = props;
+    const rangeKey = modalProps['range-key'];
     const { pageId } = useContext(RouteContext) || {};
     const buttonText = buttonTextMap[global.__mpx?.i18n?.locale || 'zh-CN'];
     const pickerValue = useRef(value);
     pickerValue.current = Array.isArray(value) ? value.slice() : value;
     const nodeRef = useRef(null);
     const pickerRef = useRef(null);
-    const { open, show, hide, remove } = useRef(createPopupManager()).current;
-    useNodesRef(props, ref, nodeRef);
-    const { layoutRef, layoutProps } = useLayout({
+    const { open, show, hide, remove, update } = useRef(createPopupManager()).current;
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
+    if (backgroundStyle) {
+        warn('Picker does not support background image-related styles!');
+    }
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({
         props,
-        hasSelfPercent: false,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
         nodeRef
     });
     const innerProps = useInnerProps(extendObject({}, props, {
-        ref: nodeRef
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
     }, layoutProps), [
         'mode',
         'value',
         'range',
+        'range-key',
+        'start',
+        'end',
+        'fields',
+        'level',
+        'custom-item',
         'disabled',
         'bindcancel',
         'bindchange',
@@ -133,9 +155,9 @@ const Picker = forwardRef((props, ref) => {
     ], { layoutRef });
     useEffect(() => {
         if (range && pickerRef.current && mode === "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
-            pickerRef.current.updateRange?.(range);
+            pickerRef.current.updateRange?.(range, rangeKey);
         }
-    }, [JSON.stringify(range)]);
+    }, [JSON.stringify(range), rangeKey, mode]);
     /** --- form 表单组件内部方法 --- */
     const getValue = () => {
         return pickerValue.current;
@@ -185,14 +207,8 @@ const Picker = forwardRef((props, ref) => {
         bindchange?.(eventData);
         hide();
     };
-    const specificProps = extendObject({}, innerProps, {
-        mode,
-        children,
-        bindchange: onChange,
-        bindcolumnchange: onColumnChange,
-        getRange: () => range
-    });
-    const renderPickerContent = () => {
+    const getContentHeight = () => headerText ? 350 : 310;
+    const getPickerContent = () => {
         if (disabled) {
             return null;
         }
@@ -200,9 +216,21 @@ const Picker = forwardRef((props, ref) => {
         if (!(_mode in pickerModalMap)) {
             return warn(`[Mpx runtime warn]: Unsupported <picker> mode: ${mode}`);
         }
+        const specificProps = {
+            mode: _mode,
+            range,
+            'range-key': rangeKey,
+            start: modalProps.start,
+            end: modalProps.end,
+            fields: modalProps.fields,
+            level: modalProps.level,
+            'custom-item': modalProps['custom-item'],
+            bindchange: onChange,
+            bindcolumnchange: onColumnChange
+        };
         const _value = value;
         const PickerModal = pickerModalMap[_mode];
-        const renderPickerModal = (<>
+        return (<>
           {headerText && (<View style={[styles.header]}>
               <Text style={[styles.headerText]}>{headerText}</Text>
             </View>)}
@@ -216,16 +244,37 @@ const Picker = forwardRef((props, ref) => {
             </View>
           </View>
         </>);
-        const contentHeight = headerText ? 350 : 310;
-        open(renderPickerModal, pageId, { contentHeight });
+    };
+    const openPickerContent = () => {
+        const renderPickerModal = getPickerContent();
+        if (!renderPickerModal) {
+            return;
+        }
+        open(renderPickerModal, pageId, { contentHeight: getContentHeight() });
     };
     useEffect(() => {
-        renderPickerContent();
+        openPickerContent();
         return () => {
             remove();
         };
     }, []);
-    return createElement(TouchableWithoutFeedback, { onPress: show }, createElement(View, innerProps, children));
+    const showPicker = () => {
+        const renderPickerModal = getPickerContent();
+        if (!renderPickerModal) {
+            return;
+        }
+        update(renderPickerModal, { contentHeight: getContentHeight() });
+        show();
+    };
+    const finalComponent = createElement(TouchableWithoutFeedback, { onPress: showPicker }, createElement(View, innerProps, wrapChildren(children, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textPassThrough
+    })));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Picker.displayName = 'MpxPicker';
 export default Picker;

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

@@ -41,8 +41,8 @@ const PickerMultiSelector = forwardRef((props, ref) => {
             setFormatValue(newValue);
         }
     }, [formatValue]);
-    const updateRange = (newRange) => {
-        const range = formatRangeFun(newRange.slice(), props['range-key']);
+    const updateRange = (newRange, rangeKey) => {
+        const range = formatRangeFun(newRange.slice(), rangeKey);
         setFormatRange(range);
     };
     const _props = useRef(props);

package/lib/runtime/components/react/dist/mpx-picker/type.d.ts

@@ -25,6 +25,10 @@ export interface BasePickerProps {
     /** 作为表单组件时的名称 */
     name?: string;
     style?: Record<string, any>;
+    'enable-var'?: boolean;
+    'enable-text-pass-through'?: boolean;
+    'parent-width'?: number;
+    'parent-height'?: number;
     children?: React.ReactNode;
     range?: RangeItem[];
     ref?: any;

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

@@ -25,7 +25,7 @@ interface PickerViewProps {
     'indicator-style'?: Record<string, any>;
     'mask-style'?: Record<string, any>;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
+    'enable-text-pass-through'?: boolean;
     'enable-offset'?: boolean;
 }
 declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;

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

@@ -2,8 +2,7 @@ import { View } from 'react-native';
 import React, { createElement, forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThroughValue } from '../utils';
-import { PickerViewStyleContext } from './pickerVIewContext';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThrough } from '../utils';
 import Portal from '../mpx-portal';
 const styles = {
     wrapper: {
@@ -17,21 +16,21 @@ const styles = {
 };
 const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
-    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 { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough } = props;
     const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
     const snapActiveValueRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
     const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
     const { textProps } = splitProps(props);
     const { textStyle } = splitStyle(normalStyle);
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const onSelectChange = (columnIndex, selectedIndex) => {
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
@@ -82,14 +81,7 @@ const _PickerView = forwardRef((props, ref) => {
             pickerMaskStyle,
             enableWheelAnimation
         });
-        const realElement = React.cloneElement(child, wrappedProps);
-        return wrapChildren({
-            children: realElement
-        }, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textPassThrough
-        });
+        return React.cloneElement(child, wrappedProps);
     };
     const validateChildInitialIndex = (index, data) => {
         return Math.max(0, Math.min(value[index] || 0, data.length - 1));
@@ -119,7 +111,11 @@ const _PickerView = forwardRef((props, ref) => {
         onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    const finalComponent = createElement(PickerViewStyleContext.Provider, { value: textStyle }, createElement(View, innerProps, createElement(View, { style: [styles.wrapper] }, renderPickerColumns())));
+    const finalComponent = createElement(View, innerProps, createElement(View, { style: [styles.wrapper] }, wrapChildren(renderPickerColumns(), {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textPassThrough
+    })));
     if (hasPositionFixed) {
         return createElement(Portal, null, finalComponent);
     }

package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts

@@ -3,6 +3,4 @@ import { SharedValue } from 'react-native-reanimated';
 type ContextValue = SharedValue<number>;
 export declare const PickerViewColumnAnimationContext: import("react").Context<ContextValue | undefined>;
 export declare const usePickerViewColumnAnimationContext: () => ContextValue;
-export declare const PickerViewStyleContext: import("react").Context<Record<string, any> | undefined>;
-export declare const usePickerViewStyleContext: () => Record<string, any> | undefined;
 export {};

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

@@ -7,8 +7,3 @@ export const usePickerViewColumnAnimationContext = () => {
     }
     return value;
 };
-export const PickerViewStyleContext = createContext(undefined);
-export const usePickerViewStyleContext = () => {
-    const value = useContext(PickerViewStyleContext);
-    return value;
-};

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

@@ -10,7 +10,6 @@ interface ColumnProps {
         [key: string]: any;
     };
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
     wrapperStyle: {
         height: number;
         itemHeight: number;
@@ -18,6 +17,7 @@ interface ColumnProps {
     pickerMaskStyle: Record<string, any>;
     pickerIndicatorStyle: Record<string, any>;
     enableWheelAnimation?: boolean;
+    'enable-text-pass-through'?: boolean;
 }
 declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
 export default _PickerViewColumn;

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject, useTextPassThrough, wrapChildren } from '../utils';
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
@@ -11,17 +11,18 @@ import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewC
 import { calcHeightOffsets } from './pickerViewFaces';
 const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    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);
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough } = props;
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar });
+    const { textStyle } = splitStyle(normalStyle);
+    const { textProps } = splitProps(props);
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
     const scrollViewRef = useAnimatedRef();
     const offsetYShared = useScrollViewOffset(scrollViewRef);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle
     });
     const { height: pickerH, itemHeight } = wrapperStyle;
-    const [itemRawH, setItemRawH] = useState(itemHeight);
+    const [itemRawH, setItemRawH] = useState(Math.round(itemHeight));
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const dragging = useRef(false);
@@ -39,7 +40,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         setHeight,
         nodeRef: scrollViewRef
     });
-    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
+    const paddingHeight = useMemo(() => (pickerH - itemRawH) / 2, [pickerH, itemRawH]);
     const snapToOffsets = useMemo(() => Array.from({ length: maxIndex + 1 }, (_, i) => i * itemRawH), [maxIndex, itemRawH]);
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
@@ -73,6 +74,15 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             clearTimerScrollTo();
         };
     }, []);
+    // `contentOffset` prop sets visual position but does not fire scroll events,
+    // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+    // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+    useEffect(() => {
+        if (!itemRawH || dragging.current || scrolling.current) {
+            return;
+        }
+        offsetYShared.value = activeIndex.current * itemRawH;
+    }, [itemRawH]);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -94,13 +104,19 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             activeIndex.current = initialIndex;
         }, isIOS ? 0 : 200);
     }, [itemRawH, maxIndex, initialIndex]);
+    useEffect(() => {
+        const roundedH = Math.round(itemHeight);
+        if (roundedH) {
+            setItemRawH(roundedH);
+        }
+    }, [itemHeight]);
     const onItemLayout = useCallback((e) => {
         const { height: rawH } = e.nativeEvent.layout;
         const roundedH = Math.round(rawH);
-        if (roundedH && roundedH !== itemRawH) {
+        if (roundedH) {
             setItemRawH(roundedH);
         }
-    }, [itemRawH]);
+    }, []);
     const resetScrollPosition = useCallback((y) => {
         if (dragging.current || scrolling.current) {
             return;
@@ -210,8 +226,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
     const renderInnerchild = () => columnData.map((item, index) => {
         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}/>);
+            ? (<MpxPickerViewColumnItem key={index} item={item} index={index} itemHeight={itemRawH} visibleCount={visibleCount} onItemLayout={onItemLayout}/>)
+            : (<MpxPickerViewColumnItemLite key={index} item={item} index={index} itemHeight={itemRawH} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         const innerProps = extendObject({}, layoutProps, {
@@ -235,10 +251,14 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             contentContainerStyle,
             contentOffset: { x: 0, y: initialContentOffsetY }
         });
-        return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
+        return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, wrapChildren(renderInnerchild(), {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textPassThrough
+        })));
     };
-    const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
-    const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
+    const renderIndicator = () => (<PickerIndicator itemHeight={itemRawH} indicatorItemStyle={pickerIndicatorStyle}/>);
+    const renderMask = () => (<PickerMask itemHeight={itemRawH} maskContainerStyle={pickerMaskStyle}/>);
     return (<View style={[styles.wrapper, normalStyle]}>
       {renderScollView()}
       {renderMask()}

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts

@@ -5,9 +5,7 @@ interface PickerColumnItemProps {
     index: number;
     itemHeight: number;
     itemWidth?: number | '100%';
-    textStyle: Record<string, any>;
     visibleCount: number;
-    textProps?: any;
     onItemLayout?: (e: LayoutChangeEvent) => void;
 }
 declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;

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

@@ -2,9 +2,8 @@ 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();
+import { usePickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
+const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', visibleCount, onItemLayout }) => {
     const offsetYShared = usePickerViewColumnAnimationContext();
     const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount]);
     const animatedStyles = useAnimatedStyle(() => {
@@ -21,8 +20,8 @@ const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', tex
     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);
+        style: extendObject({ height: itemHeight, width: '100%' }, item.props.style)
+    }, restProps);
     const realItem = React.cloneElement(item, itemProps);
     return (<Reanimated.View key={strKey} style={[
             { height: itemHeight, width: itemWidth, pointerEvents: 'none' },

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

@@ -5,8 +5,6 @@ interface PickerColumnItemProps {
     index: number;
     itemHeight: number;
     itemWidth?: number | '100%';
-    textStyle: Record<string, any>;
-    textProps?: any;
     onItemLayout?: (e: LayoutChangeEvent) => void;
 }
 declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;

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

@@ -1,14 +1,12 @@
 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 PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', onItemLayout }) => {
     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);
+        style: extendObject({ height: itemHeight, width: '100%' }, item.props.style)
+    }, restProps);
     const realItem = React.cloneElement(item, itemProps);
     return (<View key={strKey} style={[
             { height: itemHeight, width: itemWidth, pointerEvents: 'none' }

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

@@ -7,16 +7,17 @@ export interface IUsePopupOptions {
     modal?: React.ComponentType<PopupBaseProps>;
     type?: PopupType;
 }
+type PopupOptions = {
+    contentHeight?: number;
+};
 /**
  * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
  */
 declare const createPopupManager: (options?: IUsePopupOptions) => {
-    open: (childComponent: React.ReactNode, pageId: number | undefined, options?: {
-        contentHeight?: number;
-    }) => void;
+    open: (childComponent: React.ReactNode, pageId: number | undefined, options?: PopupOptions) => void;
     show: () => void;
     hide: () => void;
-    update: (updatedChild: ReactElement | null) => void;
+    update: (updatedChild: ReactElement | null, options?: PopupOptions) => void;
     remove: () => void;
 };
 export { createPopupManager };

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

@@ -36,9 +36,9 @@ const createPopupManager = (options = {}) => {
             popupKey = Portal.add(child, pageId);
         }
     };
-    const update = (updatedChild) => {
+    const update = (updatedChild, options) => {
         if (popupKey !== null && child !== null && updatedChild !== null) {
-            child = cloneElement(child, { children: updatedChild });
+            child = cloneElement(child, Object.assign({ children: updatedChild }, options));
             Portal.update(popupKey, child);
         }
     };

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

@@ -39,8 +39,9 @@ const MOVEOUT_HEIGHT = 330;
  */
 const PopupBase = (props = {}) => {
     const { children, hide = () => null, contentHeight = MOVEOUT_HEIGHT, visible = false } = props;
+    const moveoutHeight = contentHeight + bottom;
     const fade = useSharedValue(MASK_OFF);
-    const slide = useSharedValue(contentHeight);
+    const slide = useSharedValue(moveoutHeight);
     const animatedStylesMask = useAnimatedStyle(() => ({
         opacity: fade.value
     }));
@@ -62,7 +63,7 @@ const PopupBase = (props = {}) => {
             easing: Easing.inOut(Easing.poly(3)),
             duration: 300
         });
-        slide.value = withTiming(contentHeight, {
+        slide.value = withTiming(moveoutHeight, {
             easing: Easing.inOut(Easing.poly(3)),
             duration: 300
         });

package/lib/runtime/components/react/dist/mpx-progress.d.ts

@@ -14,8 +14,6 @@ export interface ProgressProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

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

@@ -20,7 +20,7 @@ import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
 import Portal from './mpx-portal';
 const Progress = forwardRef((props, ref) => {
-    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const nodeRef = useRef(null);
     const propsRef = useRef(props);
     propsRef.current = props;
@@ -29,8 +29,6 @@ const Progress = forwardRef((props, ref) => {
     const progressWidth = useSharedValue(0);
     const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
         enableVar,
-        externalVarContext,
-        parentFontSize,
         parentWidth,
         parentHeight
     });

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

@@ -9,8 +9,6 @@ export interface RadioGroupProps {
     style?: ViewStyle & Record<string, any>;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'external-var-context'?: Record<string, any>;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;