@mpxjs/webpack-plugin 2.10.24 → 2.11.0

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -26,7 +26,7 @@ import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import Icon from './mpx-icon'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils'
 import { CheckboxGroupContext, LabelContext } from './context'
 import Portal from './mpx-portal'
 
@@ -42,8 +42,7 @@ export interface CheckboxProps extends Selection {
   groupValue?: Array<string>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
+  'enable-text-pass-through'?: boolean
   'parent-width'?: number
   'parent-height'?: number
   children?: ReactNode
@@ -89,8 +88,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       color = '#09BB07',
       style = {},
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
-      'parent-font-size': parentFontSize,
+      'enable-text-pass-through': enableTextPassThrough,
       'parent-width': parentWidth,
       'parent-height': parentHeight,
       bindtap,
@@ -103,14 +101,12 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
-    const defaultStyle = extendObject(
+    const wrapperStyle = extendObject(
       {},
       styles.wrapper,
       disabled ? styles.wrapperDisabled : null
     )
 
-    const styleObj = extendObject({}, styles.container, style)
-
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled) return
       const checked = !isChecked
@@ -136,19 +132,19 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle: styles.container })
 
     const nodeRef = useRef(null)
 
     useNodesRef(props, ref, nodeRef, {
-      style: extendObject({}, defaultStyle, normalStyle),
+      style: normalStyle,
       change: onChange
     })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
     if (backgroundStyle) {
       warn('Checkbox does not support background image-related styles!')
@@ -214,7 +210,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
     const finalComponent = createElement(View, innerProps,
       createElement(
         View,
-        { style: defaultStyle },
+        { style: wrapperStyle },
         createElement(Icon, {
           type: 'success_no_circle',
           size: 18,
@@ -223,7 +219,7 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
         })
       ),
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-form.tsx

@@ -9,14 +9,13 @@ import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'reac
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject, useTextPassThrough } from './utils'
 interface FormProps {
   style?: Record<string, any>
   children?: ReactNode
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
+  'enable-text-pass-through'?: boolean
   'parent-width'?: number
   'parent-height'?: number
   bindsubmit?: (evt: {
@@ -32,8 +31,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
   const {
     style,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
+    'enable-text-pass-through': enableTextPassThrough,
     'parent-width': parentWidth,
     'parent-height': parentHeight
   } = props
@@ -45,10 +43,10 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentWidth, parentHeight })
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
-  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
   const formRef = useRef(null)
   useNodesRef(props, ref, formRef, {
@@ -114,7 +112,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
     FormContext.Provider,
     { value: contextValue },
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-icon/index.tsx

@@ -37,8 +37,6 @@ export interface IconProps {
   style?: TextStyle & 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
 }
@@ -63,8 +61,6 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       color,
       style = {},
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
-      'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight
     } = props
@@ -81,7 +77,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       normalStyle,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight })
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, { style: normalStyle })

package/lib/runtime/components/react/mpx-image.tsx

@@ -23,11 +23,11 @@ import {
   ImageLoadEventData,
   ImageSourcePropType
 } from 'react-native'
-import { noop } from '@mpxjs/utils'
+import { hasOwn, noop } from '@mpxjs/utils'
 import { LocalSvg, SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
+import { svgRegExp, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils'
 import Portal from './mpx-portal'
 
 export type Mode =
@@ -52,8 +52,6 @@ export interface ImageProps {
   style?: ImageStyle & 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
   'enable-fast-image'?: boolean
@@ -72,26 +70,46 @@ interface ImageState {
 
 const DEFAULT_IMAGE_WIDTH = 320
 const DEFAULT_IMAGE_HEIGHT = 240
-const cropMode: Mode[] = [
-  'top',
-  'bottom',
-  'center',
-  'right',
-  'left',
-  'top left',
-  'top right',
-  'bottom left',
-  'bottom right'
-]
-
-const ModeMap = new Map<Mode, ImageResizeMode | undefined>([
-  ['scaleToFill', 'stretch'],
-  ['aspectFit', 'contain'],
-  ['aspectFill', 'cover'],
-  ['widthFix', 'stretch'],
-  ['heightFix', 'stretch'],
-  ...cropMode.map<[Mode, ImageResizeMode]>(mode => [mode, 'stretch'])
-])
+const cropModeMap: Record<string, boolean> = {
+  top: true,
+  bottom: true,
+  center: true,
+  right: true,
+  left: true,
+  'top left': true,
+  'top right': true,
+  'bottom left': true,
+  'bottom right': true
+}
+
+const modeResizeMap: Record<string, ImageResizeMode> = {
+  scaleToFill: 'stretch',
+  aspectFit: 'contain',
+  aspectFill: 'cover',
+  widthFix: 'stretch',
+  heightFix: 'stretch',
+  top: 'stretch',
+  bottom: 'stretch',
+  center: 'stretch',
+  right: 'stretch',
+  left: 'stretch',
+  'top left': 'stretch',
+  'top right': 'stretch',
+  'bottom left': 'stretch',
+  'bottom right': 'stretch'
+}
+
+const DEFAULT_IMAGE_STYLE: ImageStyle = {
+  width: DEFAULT_IMAGE_WIDTH,
+  height: DEFAULT_IMAGE_HEIGHT
+}
+const OVERFLOW_HIDDEN_STYLE = { overflow: 'hidden' as const }
+const SVG_TRANSFORM_ORIGIN_STYLE = { transformOrigin: 'left top' as const }
+const BASE_IMAGE_FILL_STYLE: ImageStyle = {
+  transformOrigin: 'left top',
+  width: '100%',
+  height: '100%'
+}
 
 const isNumber = (value: DimensionValue): value is number => typeof value === 'number'
 
@@ -109,7 +127,7 @@ function getImageUri (src: string | ImageSourcePropType) {
 
 function isSvgSource (src: string | ImageSourcePropType) {
   const uri = getImageUri(src)
-  return SVG_REGEXP.test(uri)
+  return svgRegExp.test(uri)
 }
 
 function getImageSize (src: string | ImageSourcePropType, success: (width: number, height: number) => void, fail: () => void = noop) {
@@ -157,10 +175,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     src = '',
     mode = 'scaleToFill',
     style = {},
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'enable-fast-image': enableFastImage,
+    'enable-var': enableVar, 'enable-fast-image': enableFastImage,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'is-svg': isSvgProp,
@@ -168,29 +183,17 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     binderror
   } = props
 
-  const defaultStyle = {
-    width: DEFAULT_IMAGE_WIDTH,
-    height: DEFAULT_IMAGE_HEIGHT
-  }
-
-  const styleObj = extendObject(
-    {},
-    defaultStyle,
-    style,
-    { overflow: 'hidden' }
-  )
+  const styleObj = extendObject({}, style, OVERFLOW_HIDDEN_STYLE)
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, {
-    defaultStyle
-  })
 
-  const isSvg = isSvgProp || isSvgSource(src)
+  const isSvg = useMemo(() => isSvgProp || isSvgSource(src), [isSvgProp, src])
+  const imageSource = useMemo(() => normalizeImageSource(src), [src])
   const isWidthFixMode = mode === 'widthFix'
   const isHeightFixMode = mode === 'heightFix'
-  const isCropMode = cropMode.includes(mode)
+  const isCropMode = hasOwn(cropModeMap, mode)
   const isLayoutMode = isWidthFixMode || isHeightFixMode || isCropMode
-  const resizeMode: ImageResizeMode = ModeMap.get(mode) || 'stretch'
+  const resizeMode: ImageResizeMode = hasOwn(modeResizeMap, mode) ? modeResizeMap[mode] : 'stretch'
 
   const onLayout = ({ nativeEvent: { layout: { width, height } } }: LayoutChangeEvent) => {
     state.current.viewWidth = width
@@ -217,7 +220,12 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, transformRadiusPercent: isAndroid && !isSvg && !isLayoutMode, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = 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
+  })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,
@@ -225,7 +233,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     setWidth,
     setHeight,
     nodeRef,
-    onLayout: isLayoutMode ? onLayout : noop
+    onLayout: isLayoutMode ? onLayout : undefined
   })
 
   const { width, height } = normalStyle
@@ -504,7 +512,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     const svgProps = {
       onLayout: onSvgLoad,
       style: extendObject(
-        { transformOrigin: 'left top' },
+        {},
+        SVG_TRANSFORM_ORIGIN_STYLE,
         modeStyle
       )
     }
@@ -518,21 +527,20 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   }
 
   function renderBaseImage () {
+    const baseImageStyle = isCropMode
+      ? extendObject(
+        { transformOrigin: 'left top', width: imageWidth, height: imageHeight },
+        modeStyle
+      )
+      : BASE_IMAGE_FILL_STYLE
     return renderImage(
       extendObject(
         {
-          source: normalizeImageSource(src),
+          source: imageSource,
           resizeMode: resizeMode,
           onLoad: bindload && onImageLoad,
           onError: binderror && onImageError,
-          style: extendObject(
-            {
-              transformOrigin: 'left top',
-              width: isCropMode ? imageWidth : '100%',
-              height: isCropMode ? imageHeight : '100%'
-            },
-            isCropMode ? modeStyle : {}
-          )
+          style: baseImageStyle
         },
         isLayoutMode ? {} : innerProps
       ),

package/lib/runtime/components/react/mpx-inline-text.tsx

@@ -1,20 +1,29 @@
 import { Text, TextProps } from 'react-native'
 import { JSX, createElement, useContext } from 'react'
 
-import { extendObject, getDefaultAllowFontScaling } from './utils'
+import { extendObject, getDefaultAllowFontScaling, resolveTextLineHeightPercentStyle } from './utils'
 import { TextPassThroughContext } from './context'
 
 const InlineText = (props: TextProps): JSX.Element => {
   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)
 }
 

package/lib/runtime/components/react/mpx-input.tsx

@@ -97,8 +97,6 @@ export interface InputProps {
   'placeholder-style'?: { color?: string }
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   // 只有 RN 环境读取
@@ -148,8 +146,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'selection-start': selectionStart = -1,
     'selection-end': selectionEnd = -1,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'adjust-position': adjustPosition = true,
@@ -212,7 +208,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
@@ -295,7 +291,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
-  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+  const markEventOrigin = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
     evt.nativeEvent.origin = 'input'
   }
 
@@ -473,7 +469,18 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
   // 这个问题只在 Android 上出现
   // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-  const needMultilineFix = isAndroid && !multiline
+  const conditionalTextInputProps: {
+    multiline?: boolean
+    numberOfLines?: number
+    enterKeyHint?: ConfirmType
+  } = {}
+  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(
@@ -494,13 +501,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         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,
@@ -508,8 +516,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
       },
-      needMultilineFix ? { numberOfLines: 1 } : {},
-      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
+      conditionalTextInputProps
     ),
     [
       'name',

package/lib/runtime/components/react/mpx-label.tsx

@@ -6,7 +6,7 @@ import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThrough } from './utils'
 import { LabelContext, LabelContextValue } from './context'
 import Portal from './mpx-portal'
 
@@ -15,8 +15,7 @@ export interface LabelProps {
   style?: ViewStyle & Record<string, any>
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
+  'enable-text-pass-through'?: boolean
   'parent-width'?: number
   'parent-height'?: number
   children: ReactNode
@@ -31,8 +30,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const {
       style = {},
       'enable-var': enableVar,
-      'external-var-context': externalVarContext,
-      'parent-font-size': parentFontSize,
+      'enable-text-pass-through': enableTextPassThrough,
       'parent-width': parentWidth,
       'parent-height': parentHeight
     } = props
@@ -43,8 +41,6 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       flexDirection: 'row'
     }
 
-    const styleObj = extendObject({}, defaultStyle, style)
-
     const {
       hasPositionFixed,
       hasSelfPercent,
@@ -53,7 +49,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+    } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle })
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, { style: normalStyle })
@@ -61,7 +57,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
     const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
-    const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
     if (backgroundStyle) {
       warn('Label does not support background image-related styles!')
@@ -100,7 +96,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       LabelContext.Provider,
       { value: contextRef },
       wrapChildren(
-        props,
+        props.children,
         {
           hasVarDec,
           varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -17,14 +17,12 @@ interface MovableAreaProps {
   height?: number
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
+  const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -34,7 +32,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     hasPositionFixed,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentWidth, parentHeight })
 
   const movableViewRef = useRef(null)
   useNodesRef(props, ref, movableViewRef, {
@@ -66,7 +64,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     View,
     innerProps,
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -22,7 +22,7 @@ import { StyleSheet, View, LayoutChangeEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThroughValue } from './utils'
+import { useTransformStyle, splitProps, splitStyle, hiddenStyle, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThrough } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -179,8 +179,7 @@ interface MovableViewProps {
   'simultaneous-handlers'?: Array<GestureHandler>
   inertia?: boolean
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
+  'enable-text-pass-through'?: boolean
   'parent-width'?: number
   'parent-height'?: number
   'disable-event-passthrough'?: boolean
@@ -213,8 +212,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     friction = 2,
     'out-of-bounds': outOfBounds = false,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
+    'enable-text-pass-through': enableTextPassThrough,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     direction = 'none',
@@ -243,7 +241,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentWidth, parentHeight })
 
   const navigation = useNavigation()
 
@@ -251,7 +249,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const prevWaitForHandlersRef = useRef<Array<GestureHandler>>(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)
@@ -719,7 +717,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     return handlers
   }
 
-  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}
+  const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? hiddenStyle : {}
 
   // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
   // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
@@ -769,7 +767,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     Animated.View,
     innerProps,
     wrapChildren(
-      props,
+      props.children,
       {
         hasVarDec,
         varContext: varContextRef.current,

package/lib/runtime/components/react/mpx-nav.tsx

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