@mpxjs/webpack-plugin 2.10.24-test.1 → 2.11.0

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

@@ -111,7 +111,7 @@ const getFixedHeight = (viewWidth, viewHeight, ratio) => {
     return !fixed ? viewHeight : fixed;
 };
 const Image = forwardRef((props, ref) => {
-    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
+    const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
     const styleObj = extendObject({}, style, OVERFLOW_HIDDEN_STYLE);
     const nodeRef = useRef(null);
     const isSvg = useMemo(() => isSvgProp || isSvgSource(src), [isSvgProp, src]);
@@ -140,7 +140,7 @@ const Image = forwardRef((props, ref) => {
             setLoaded(true);
         }
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, parentFontSize, parentWidth, parentHeight, defaultStyle: DEFAULT_IMAGE_STYLE });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, parentWidth, parentHeight, defaultStyle: DEFAULT_IMAGE_STYLE });
     // normalStyle 已合入 DEFAULT_IMAGE_STYLE，对外暴露完整 style（含 default 兜底的 width/height）
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle

package/lib/runtime/components/react/dist/mpx-inline-text.jsx

@@ -1,14 +1,23 @@
 import { Text } from 'react-native';
 import { createElement, useContext } from 'react';
-import { extendObject, getDefaultAllowFontScaling } from './utils';
+import { extendObject, getDefaultAllowFontScaling, resolveTextLineHeightPercentStyle } from './utils';
 import { TextPassThroughContext } from './context';
 const InlineText = (props) => {
     const inheritedText = useContext(TextPassThroughContext);
-    const style = extendObject({}, inheritedText?.textStyle, props.style);
-    const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props, { style });
+    const mergedStyle = inheritedText?.textStyle
+        ? extendObject({}, inheritedText.textStyle)
+        : undefined;
+    // inline-text 只包裹裸文本，消费继承文本样式中的相对 lineHeight，不处理本地样式。
+    if (inheritedText?.textStyle) {
+        resolveTextLineHeightPercentStyle(mergedStyle, inheritedText.textStyle);
+    }
+    const mergedProps = inheritedText?.pendingTextProps
+        ? extendObject({}, inheritedText.pendingTextProps, props)
+        : props;
     const { allowFontScaling, children } = mergedProps;
     return createElement(Text, extendObject({}, mergedProps, {
-        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling()
+        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
+        style: mergedStyle
     }), children);
 };
 InlineText.displayName = 'MpxInlineText';

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

@@ -27,7 +27,6 @@ export interface InputProps {
     };
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'keyboard-type'?: string;

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

@@ -52,7 +52,7 @@ const inputModeMap = {
     digit: 'decimal'
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -84,7 +84,7 @@ const Input = forwardRef((props, ref) => {
     const [contentHeight, setContentHeight] = useState(0);
     const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length });
     const styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight ? { height: 'auto' } : {});
-    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
@@ -153,7 +153,7 @@ const Input = forwardRef((props, ref) => {
         // auto-focus/focus 不会触发而是在 useEffect 中初始化
         setKeyboardAvoidContext();
     };
-    const onTouchEnd = (evt) => {
+    const markEventOrigin = (evt) => {
         evt.nativeEvent.origin = 'input';
     };
     const onFocus = (evt) => {
@@ -286,7 +286,14 @@ const Input = forwardRef((props, ref) => {
     // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
     // 这个问题只在 Android 上出现
     // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-    const needMultilineFix = isAndroid && !multiline;
+    const conditionalTextInputProps = {};
+    if (isAndroid && !multiline && props.placeholder && normalStyle.textAlign === 'center') {
+        conditionalTextInputProps.multiline = true;
+        conditionalTextInputProps.numberOfLines = 1;
+    }
+    if (!multiline || confirmType !== 'return') {
+        conditionalTextInputProps.enterKeyHint = confirmType;
+    }
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -301,20 +308,21 @@ const Input = forwardRef((props, ref) => {
         autoFocus: isAutoFocus,
         selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
-        blurOnSubmit: multiline ? confirmType !== 'return' : !confirmHold,
+        submitBehavior: multiline ? (confirmType === 'return' ? 'newline' : 'blurAndSubmit') : (confirmHold ? 'submit' : 'blurAndSubmit'),
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline,
         onTouchStart,
-        onTouchEnd,
+        onTouchEnd: markEventOrigin,
+        onTouchMove: markEventOrigin,
         onFocus,
         onBlur,
         onChange,
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
-    }, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
+    }, conditionalTextInputProps), [
         'name',
         'type',
         'maxlength',

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

@@ -10,7 +10,6 @@ export interface LabelProps {
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
     'enable-text-pass-through'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     children: ReactNode;

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

@@ -12,12 +12,12 @@ import Portal from './mpx-portal';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
     const propsRef = useRef({});
-    const { style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     propsRef.current = props;
     const defaultStyle = {
         flexDirection: 'row'
     };
-    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });

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

@@ -11,7 +11,6 @@ interface MovableAreaProps {
     height?: number;
     'enable-offset'?: boolean;
     'enable-var'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
 }

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

@@ -9,8 +9,8 @@ import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight });
+    const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
     useNodesRef(props, ref, movableViewRef, {
         style: normalStyle

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

@@ -56,7 +56,6 @@ interface MovableViewProps {
     inertia?: boolean;
     'enable-var'?: boolean;
     'enable-text-pass-through'?: boolean;
-    'parent-font-size'?: number;
     'parent-width'?: number;
     'parent-height'?: number;
     'disable-event-passthrough'?: boolean;

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

@@ -129,8 +129,8 @@ 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, 'enable-text-pass-through': enableTextPassThrough, '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, 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 || []);

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.jsx

@@ -3,7 +3,6 @@ import React, { createElement, forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
 import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThrough } from '../utils';
-import { PickerViewStyleContext } from './pickerVIewContext';
 import Portal from '../mpx-portal';
 const styles = {
     wrapper: {
@@ -82,12 +81,7 @@ const _PickerView = forwardRef((props, ref) => {
             pickerMaskStyle,
             enableWheelAnimation
         });
-        const realElement = React.cloneElement(child, wrappedProps);
-        return wrapChildren(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));
@@ -117,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

@@ -17,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 } = props;
-    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar });
-    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' }