@mpxjs/webpack-plugin 2.10.19 → 2.10.21

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

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback, useTextPassThroughValue } from './utils'
 import { SwiperContext } from './context'
 import Portal from './mpx-portal'
 /**
@@ -199,6 +199,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   })
   const { textStyle } = splitStyle(normalStyle)
   const { textProps } = splitProps(props)
+  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
   const preMargin = props['previous-margin'] ? global.__formatValue(props['previous-margin']) as number : 0
   const nextMargin = props['next-margin'] ? global.__formatValue(props['next-margin']) as number : 0
   const preMarginShared = useSharedValue(preMargin)
@@ -278,6 +279,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'indicator-dots',
       'indicator-color',
       'indicator-width',
+      'indicator-height',
+      'indicator-radius',
+      'indicator-spacing',
+      'indicator-margin',
       'indicator-active-color',
       'previous-margin',
       'vertical',
@@ -287,7 +292,15 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'autoplay',
       'circular',
       'interval',
-      'easing-function'
+      'easing-function',
+      'current',
+      'duration',
+      'scale',
+      'disableGesture',
+      'wait-for',
+      'simultaneous-handlers',
+      'bindchange'
+
     ], { layoutRef: layoutRef })
 
   function onWrapperLayout (e: LayoutChangeEvent) {
@@ -922,8 +935,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, {
     hasVarDec,
     varContext: varContextRef.current,
-    textStyle,
-    textProps
+    textPassThrough
   }))
   const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent
   finalComponent = createElement(View, mergeProps, renderChildrens)

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

@@ -137,7 +137,10 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
       'checked',
       'disabled',
       'type',
-      'color'
+      'color',
+      'name',
+      'bindchange',
+      'catchchange'
     ],
     { layoutRef }
   )

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

@@ -5,11 +5,13 @@
  * ✔ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX, createElement, Children } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement, Children, useContext } from 'react'
 import Portal from './mpx-portal'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, wrapChildren, extendObject } from './utils'
+import { useTransformStyle, wrapChildren, extendObject, getDefaultAllowFontScaling, useTextPassThroughValue, isStringChildren, splitStyle } from './utils'
+import { TextPassThroughContext } from './context'
+import * as perf from '@mpxjs/perf'
 
 const decodeMap = {
   '&lt;': '<',
@@ -51,9 +53,17 @@ interface _TextProps extends TextProps {
 }
 
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
+  let stopTotal: (() => void) | undefined
+  if (__mpx_perf_framework__) stopTotal = perf.scope('text:render:total')
+
+  // ───── props 阶段 ─────
+  let stopProps: (() => void) | undefined
+  if (__mpx_perf_framework__) stopProps = perf.scope('text:render:props')
+  const inheritedText = useContext(TextPassThroughContext)
+  const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props)
   const {
-    style = {},
-    allowFontScaling = false,
+    style: currentStyle = {},
+    allowFontScaling,
     selectable,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -62,35 +72,60 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     decode
-  } = props
+  } = mergedProps
+  if (__mpx_perf_framework__) stopProps!()
 
+  // ───── style 阶段 ─────
+  let stopStyle: (() => void) | undefined
+  if (__mpx_perf_framework__) stopStyle = perf.scope('text:render:style')
   const {
     normalStyle,
     hasVarDec,
     varContextRef,
     hasPositionFixed
-  } = useTransformStyle(style, {
+  } = useTransformStyle(currentStyle, {
     enableVar,
     externalVarContext,
     parentFontSize,
     parentWidth,
     parentHeight
   })
+  const finalStyle = extendObject({}, inheritedText?.textStyle, normalStyle)
 
   const nodeRef = useRef(null)
-  useNodesRef<Text, _TextProps>(props, ref, nodeRef, {
-    style: normalStyle
+  useNodesRef<Text, _TextProps>(mergedProps, ref, nodeRef, {
+    style: finalStyle
   })
 
+  const children = decode ? getDecodedChildren(mergedProps.children) : mergedProps.children
+  const isStringOnly = isStringChildren(children)
+  let childTextStyle: TextStyle | undefined
+  if (!isStringOnly) {
+    const { textStyle = {} } = splitStyle(finalStyle)
+    childTextStyle = Object.keys(textStyle).length ? textStyle : undefined
+  }
+  const textPassThrough = useTextPassThroughValue(
+    childTextStyle,
+    undefined,
+    {
+      inheritTextProps: false,
+      disabled: isStringOnly
+    }
+  )
+  if (__mpx_perf_framework__) stopStyle!()
+
+  // ───── innerProps 阶段 ─────
+  let stopInnerProps: (() => void) | undefined
+  if (__mpx_perf_framework__) stopInnerProps = perf.scope('text:render:innerProps')
   const innerProps = useInnerProps(
     extendObject(
       {},
-      props,
+      mergedProps,
       {
         ref: nodeRef,
-        style: normalStyle,
+        style: finalStyle,
         selectable: !!selectable || !!userSelect,
-        allowFontScaling
+        allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling()
       }
     ),
     [
@@ -98,23 +133,28 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
       'decode'
     ]
   )
+  if (__mpx_perf_framework__) stopInnerProps!()
 
-  const children = decode ? getDecodedChildren(props.children) : props.children
-
+  // ───── createElement 阶段 ─────
+  let stopCreate: (() => void) | undefined
+  if (__mpx_perf_framework__) stopCreate = perf.scope('text:render:createElement')
   let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren(
-    extendObject({}, props, {
+    extendObject({}, mergedProps, {
       children
     }),
     {
       hasVarDec,
-      varContext: varContextRef.current
+      varContext: varContextRef.current,
+      textPassThrough
     }
   ))
 
   if (hasPositionFixed) {
     finalComponent = createElement(Portal, null, finalComponent)
   }
+  if (__mpx_perf_framework__) stopCreate!()
 
+  if (__mpx_perf_framework__) stopTotal!()
   return finalComponent
 })
 

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

@@ -77,7 +77,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import Portal from './mpx-portal'
 
 interface VideoProps {
-  src: string
+  src: string | ReactVideoSourceProperties | number
   autoplay?: boolean
   loop?: boolean
   muted?: boolean
@@ -321,10 +321,8 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
     videoRef.current && videoRef.current.setFullScreen(true)
   }
 
-  const source: ReactVideoSourceProperties = {
-    uri: src
-  }
-  if (isDrm) {
+  const source = typeof src === 'string' ? { uri: src } : (typeof src === 'number' ? src : extendObject({}, src))
+  if (isDrm && source && typeof source !== 'number') {
     source.drm = {
       type: DRMType.FAIRPLAY,
       certificateUrl: __mpx_mode__ !== 'ios' ? provisionUrl : certificateUrl,
@@ -369,6 +367,14 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
       'src',
       'autoplay',
       'loop',
+      'initial-time',
+      'object-fit',
+      'is-drm',
+      'provision-url',
+      'certificate-url',
+      'license-url',
+      'preferred-peak-bit-rate',
+      'enable-auto-rotation',
       'bindplay',
       'bindpause',
       'bindended',

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

@@ -12,8 +12,9 @@ import useAnimationHooks, { AnimationType } from './animationHooks/index'
 import type { AnimationProp } from './animationHooks/utils'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover, useTextPassThroughValue } from './utils'
 import { error, isFunction } from '@mpxjs/utils'
+import * as perf from '@mpxjs/perf'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 import Portal from './mpx-portal'
@@ -681,16 +682,16 @@ interface WrapChildrenConfig {
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
   textProps?: Record<string, any>
+  textPassThrough?: ReturnType<typeof useTextPassThroughValue>
   innerStyle?: Record<string, any>
   enableFastImage?: boolean
 }
 
-function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
+function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, backgroundStyle, varContext, textPassThrough, innerStyle, enableFastImage }: WrapChildrenConfig) {
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
-    textStyle,
-    textProps
+    textPassThrough
   })
 
   return [
@@ -701,6 +702,13 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
 }
 
 const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, ref): JSX.Element => {
+  // 性能探针 - total
+  let stopTotal: (() => void) | undefined
+  if (__mpx_perf_framework__) stopTotal = perf.scope('view:render:total')
+
+  // ───── props 阶段 ─────
+  let stopProps: (() => void) | undefined
+  if (__mpx_perf_framework__) stopProps = perf.scope('view:render:props')
   const { textProps, innerProps: props = {} } = splitProps(viewProps)
   let {
     style = {},
@@ -734,7 +742,11 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime })
 
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
+  if (__mpx_perf_framework__) stopProps!()
 
+  // ───── style 阶段 ─────
+  let stopStyle: (() => void) | undefined
+  if (__mpx_perf_framework__) stopStyle = perf.scope('view:render:style')
   const {
     normalStyle,
     hasSelfPercent,
@@ -752,6 +764,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   })
 
   const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
+  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
 
   enableBackground = enableBackground || !!backgroundStyle
   const enableBackgroundRef = useRef(enableBackground)
@@ -783,7 +796,11 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: viewStyle,
     transitionend
   })
+  if (__mpx_perf_framework__) stopStyle!()
 
+  // ───── innerProps 阶段 ─────
+  let stopInnerProps: (() => void) | undefined
+  if (__mpx_perf_framework__) stopInnerProps = perf.scope('view:render:innerProps')
   const innerProps = useInnerProps(
     extendObject(
       {},
@@ -795,23 +812,31 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     ),
     [
+      'animation',
       'hover-start-time',
       'hover-stay-time',
       'hover-style',
-      'hover-class'
+      'hover-class',
+      'enable-fast-image',
+      'enable-animation',
+      'bindtransitionend',
+      'catchtransitionend'
     ],
     {
       layoutRef
     }
   )
+  if (__mpx_perf_framework__) stopInnerProps!()
 
+  // ───── createElement 阶段 ─────
+  let stopCreate: (() => void) | undefined
+  if (__mpx_perf_framework__) stopCreate = perf.scope('view:render:createElement')
   const childNode = wrapWithChildren(props, {
     hasVarDec,
     enableBackground: enableBackgroundRef.current,
-    textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
-    textProps,
+    textPassThrough,
     innerStyle,
     enableFastImage
   })
@@ -827,6 +852,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   if (hasPositionFixed) {
     finalComponent = createElement(Portal, null, finalComponent)
   }
+  if (__mpx_perf_framework__) stopCreate!()
+
+  if (__mpx_perf_framework__) stopTotal!()
   return finalComponent
 })
 

package/lib/runtime/components/react/types/global.d.ts

@@ -1,4 +1,8 @@
 declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
+// 性能探针开关（DefinePlugin 注入）。详见 packages/webpack-plugin/lib/utils/normalize-perf-options.js
+declare const __mpx_perf__: boolean
+declare const __mpx_perf_framework__: boolean
+declare const __mpx_perf_user__: boolean
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean

package/lib/runtime/components/react/utils.tsx

@@ -1,23 +1,39 @@
-import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, createElement, MutableRefObject } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
-import { VarContext, ScrollViewContext, RouteContext } from './context'
+import { VarContext, ScrollViewContext, RouteContext, TextPassThroughContext, TextPassThroughContextValue } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import type { FastImageProps } from '@d11/react-native-fast-image'
 import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 import { Gesture } from 'react-native-gesture-handler'
 
-export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
+export const TEXT_STYLE_MAP: Record<string, boolean> = {
+  color: true,
+  letterSpacing: true,
+  lineHeight: true,
+  includeFontPadding: true,
+  writingDirection: true
+}
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/
-export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
-export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/
+export const SVG_REGEXP = /\.svg(?:[?#].*)?$/i
+export const BACKGROUND_STYLE_MAP: Record<string, boolean> = {
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundRepeat: true,
+  backgroundPosition: true
+}
+export const TEXT_PROPS_MAP: Record<string, boolean> = {
+  ellipsizeMode: true,
+  numberOfLines: true
+}
 export const DEFAULT_FONT_SIZE = 16
 export const HIDDEN_STYLE = {
   opacity: 0
 }
+export const DEFAULT_BOX_SIZING_STYLE = {
+  boxSizing: 'content-box'
+}
 
 declare const __mpx_mode__: 'ios' | 'android' | 'harmony'
 
@@ -30,9 +46,19 @@ const varUseRegExp = /var\(/
 const unoVarDecRegExp = /^--un-/
 const unoVarUseRegExp = /var\(--un-/
 const calcUseRegExp = /calc\(/
-const calcPercentExp = /^calc\(.*-?\d+(\.\d+)?%.*\)$/
 const envUseRegExp = /env\(/
-const filterRegExp = /(calc|env|%)/
+const boxSizingAffectingStyleMap: Record<string, boolean> = {
+  padding: true,
+  paddingTop: true,
+  paddingRight: true,
+  paddingBottom: true,
+  paddingLeft: true,
+  borderWidth: true,
+  borderTopWidth: true,
+  borderRightWidth: true,
+  borderBottomWidth: true,
+  borderLeftWidth: true
+}
 
 const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-top': 'top',
@@ -43,6 +69,25 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
 
 export const extendObject = Object.assign
 
+export function getDefaultAllowFontScaling (): boolean {
+  return global.__mpx?.config?.rnConfig?.allowFontScaling ?? false
+}
+
+export function transformBoxSizing (style: Record<string, any> = {}, hasBoxSizingAffectingStyle = false) {
+  if (hasBoxSizingAffectingStyle && style.boxSizing === undefined) {
+    style.boxSizing = global.__mpx?.config?.rnConfig?.defaultBoxSizing ?? DEFAULT_BOX_SIZING_STYLE.boxSizing
+  }
+  return style
+}
+
+export function isBoxSizingAffectingStyle (key: string) {
+  return hasOwn(boxSizingAffectingStyleMap, key)
+}
+
+function isTextStyle (key: string) {
+  return hasOwn(TEXT_STYLE_MAP, key) || key.startsWith('font') || key.startsWith('text')
+}
+
 function getSafeAreaInset (name: string, navigation: Record<string, any> | undefined) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
@@ -107,12 +152,14 @@ export function isText (ele: ReactNode): ele is ReactElement {
   return false
 }
 
-export function every (children: ReactNode, callback: (children: ReactNode) => boolean) {
-  const childrenArray = Array.isArray(children) ? children : [children]
-  return childrenArray.every((child) => callback(child))
+export function isStringChildren (children: ReactNode) {
+  if (typeof children === 'string') return true
+  if (!Array.isArray(children)) return false
+  return children.every((child) => typeof child === 'string')
 }
 
 type GroupData<T> = Record<string, Partial<T>>
+
 export function groupBy<T extends Record<string, any>> (
   obj: T,
   callback: (key: string, val: T[keyof T]) => string,
@@ -126,24 +173,21 @@ export function groupBy<T extends Record<string, any>> (
   return group
 }
 
-export function splitStyle<T extends Record<string, any>> (styleObj: T): {
+export function splitStyle<T extends Record<string, any>> (styleObj: T, sideEffect?: (key: string, val: T[keyof T]) => void): {
   textStyle?: Partial<T>
   backgroundStyle?: Partial<T>
   innerStyle?: Partial<T>
 } {
-  return groupBy(styleObj, (key) => {
-    if (TEXT_STYLE_REGEX.test(key)) {
+  return groupBy(styleObj, (key, val) => {
+    sideEffect && sideEffect(key, val)
+    if (isTextStyle(key)) {
       return 'textStyle'
-    } else if (BACKGROUND_REGEX.test(key)) {
+    } else if (hasOwn(BACKGROUND_STYLE_MAP, key)) {
       return 'backgroundStyle'
     } else {
       return 'innerStyle'
     }
-  }) as {
-    textStyle: Partial<T>
-    backgroundStyle: Partial<T>
-    innerStyle: Partial<T>
-  }
+  })
 }
 const radiusPercentRule: Record<string, 'height' | 'width'> = {
   borderTopLeftRadius: 'width',
@@ -334,8 +378,9 @@ export function parseValues (str: string, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform (transformStr: string) {
   const values = parseValues(transformStr)
-  // Todo transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
-  values.sort()
+  // Todo 2 RN下顺序不一致转换结果不一致，故这里不处理，动画前后transform 排序不一致的问题，由业务调整写法
+  // Todo 1 transform 排序不一致时，transform动画会闪烁，故这里同样的排序输出 transform
+  // values.sort()
   const transform: { [propName: string]: string | number | number[] }[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\((.+)\)/)
@@ -415,6 +460,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   let hasVarDec = false
   let hasVarUse = false
   let hasSelfPercent = false
+  let hasBoxSizingAffectingStyle = false
   const varKeyPaths: Array<Array<string>> = []
   const unoVarKeyPaths: Array<Array<string>> = []
   const percentKeyPaths: Array<Array<string>> = []
@@ -450,19 +496,20 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     }
   }
 
+  function boxSizingVisitor ({ key, keyPath }: VisitorArg) {
+    if (keyPath.length === 1 && !hasBoxSizingAffectingStyle && isBoxSizingAffectingStyle(key)) {
+      hasBoxSizingAffectingStyle = true
+    }
+  }
+
   function envVisitor ({ value, keyPath }: VisitorArg) {
     if (envUseRegExp.test(value)) {
       envKeyPaths.push(keyPath.slice())
     }
   }
 
-  function calcVisitor ({ key, value, keyPath }: VisitorArg) {
+  function calcVisitor ({ value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
-      // calc translate & border-radius 的百分比计算
-      if (hasOwn(selfPercentRule, key) && calcPercentExp.test(value)) {
-        hasSelfPercent = true
-        percentKeyPaths.push(keyPath.slice())
-      }
       calcKeyPaths.push(keyPath.slice())
     }
   }
@@ -479,13 +526,13 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   }
 
   function visitOther ({ target, key, value, keyPath }: VisitorArg) {
-    if (filterRegExp.test(value)) {
+    if (typeof value === 'string' && (value.includes('%') || value.includes('calc(') || value.includes('env('))) {
       [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
     }
   }
 
   // traverse var & generate normalStyle
-  traverseStyle(styleObj, [varVisitor])
+  traverseStyle(styleObj, [varVisitor, boxSizingVisitor])
   hasVarDec = hasVarDec || !!externalVarContext
   enableVar = enableVar || hasVarDec || hasVarUse
   const enableVarRef = useRef(enableVar)
@@ -530,6 +577,9 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   // apply calc
   transformCalc(normalStyle, calcKeyPaths, (value: string, key: string) => {
     if (PERCENT_REGEX.test(value)) {
+      if (hasOwn(selfPercentRule, key)) {
+        hasSelfPercent = true
+      }
       const resolved = resolvePercent(value, key, percentConfig)
       return typeof resolved === 'number' ? resolved : 0
     } else {
@@ -551,6 +601,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformBoxShadow(normalStyle)
   // transform 字符串格式转化数组格式(先转数组再处理css var)
   transformTransform(normalStyle)
+  transformBoxSizing(normalStyle, hasBoxSizingAffectingStyle)
 
   return {
     hasVarDec,
@@ -613,7 +664,7 @@ export function splitProps<T extends Record<string, any>> (props: T): {
   innerProps?: Partial<T>
 } {
   return groupBy(props, (key) => {
-    if (TEXT_PROPS_REGEX.test(key)) {
+    if (hasOwn(TEXT_PROPS_MAP, key)) {
       return 'textProps'
     } else {
       return 'innerProps'
@@ -667,20 +718,50 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
 export interface WrapChildrenConfig {
   hasVarDec: boolean
   varContext?: Record<string, any>
-  textStyle?: TextStyle
-  textProps?: Record<string, any>
+  textPassThrough?: TextPassThroughContextValue | null
 }
 
-export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varContext, textStyle, textProps }: WrapChildrenConfig) {
+export interface TextPassThroughValueOptions {
+  inheritTextProps?: boolean
+  disabled?: boolean
+}
+
+export function useTextPassThroughValue (
+  textStyle?: TextStyle,
+  textProps?: Record<string, any>,
+  { inheritTextProps = true, disabled = false }: TextPassThroughValueOptions = {}
+) {
+  const parent = useContext(TextPassThroughContext)
+  const valueRef = useRef<TextPassThroughContextValue | null>(null)
+
+  if (disabled) return null
+
+  if (!textStyle && !textProps && (inheritTextProps || !parent?.pendingTextProps)) return null
+
+  const nextTextStyle = textStyle
+    ? extendObject({}, parent?.textStyle, textStyle)
+    : parent?.textStyle
+  const nextTextProps = inheritTextProps
+    ? textProps
+      ? extendObject({}, parent?.pendingTextProps, textProps)
+      : parent?.pendingTextProps
+    : textProps
+  const nextValue = {
+    textStyle: nextTextStyle,
+    pendingTextProps: nextTextProps
+  }
+
+  if (diffAndCloneA(valueRef.current, nextValue).diff) {
+    valueRef.current = nextValue
+  }
+
+  return valueRef.current
+}
+
+export function wrapChildren (props: Record<string, any> = {}, { hasVarDec, varContext, textPassThrough }: WrapChildrenConfig) {
   let { children } = props
-  if (textStyle || textProps) {
-    children = Children.map(children, (child) => {
-      if (isText(child)) {
-        const style = extendObject({}, textStyle, child.props.style)
-        return cloneElement(child, extendObject({}, textProps, { style }))
-      }
-      return child
-    })
+  if (textPassThrough) {
+    children = <TextPassThroughContext.Provider value={textPassThrough} key='textPassThroughWrap'>{children}</TextPassThroughContext.Provider>
   }
   if (hasVarDec && varContext) {
     children = <VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>
@@ -754,10 +835,10 @@ export function getCurrentPage (pageId: number | null | undefined) {
 }
 
 export function renderImage (
-  imageProps: ImageProps | FastImageProps,
+  imageProps: ImageProps,
   enableFastImage = true
 ) {
-  let Component: React.ComponentType<ImageProps | FastImageProps> = Image
+  let Component = Image
   if (enableFastImage) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const fastImageModule = require('@d11/react-native-fast-image')