@mpxjs/webpack-plugin 2.9.62 → 2.9.64

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

@@ -4,21 +4,26 @@
  * ✔ hover-start-time
  * ✔ hover-stay-time
  */
-import { View, Text, StyleProp, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
+import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils'
+import LinearGradient from 'react-native-linear-gradient'
 
-import { parseUrl, PERCENT_REGEX, isText, every, normalizeStyle, splitStyle, splitProps, throwReactWarning, transformTextStyle } from './utils'
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
   children?: ReactNode | ReactNode[]
-  hoverStyle?: ExtendedViewStyle
-  ['hover-start-time']?: number
-  ['hover-stay-time']?: number
-  'enable-offset'?: boolean
-  'enable-background-image'?: boolean
+  'hover-style'?: ExtendedViewStyle
+  'hover-start-time'?: number
+  'hover-stay-time'?: number
+  'enable-background'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
@@ -31,7 +36,7 @@ type Size = {
   height: number
 }
 
-type DimensionValue = number | 'auto' | `${number}%`
+type DimensionValue = number | `${number}%` | 'auto' | 'contain' | 'cover'
 
 type Position = {
   left?: number
@@ -48,35 +53,94 @@ type PositionVal = PositionKey | NumberVal
 
 type backgroundPositionList = ['left' | 'right', NumberVal, 'top' | 'bottom', NumberVal] | []
 
+type LinearInfo = {
+  colors: Array<string>,
+  locations: Array<number>,
+  direction?: string
+}
+
 type PreImageInfo = {
   src?: string,
   sizeList: DimensionValue[]
-  containPercentSymbol?: boolean
+  type?: 'image' | 'linear'
+  linearInfo?: LinearInfo
+  // containPercentSymbol?: boolean
   backgroundPosition: backgroundPositionList
 }
 
 type ImageProps = {
   style: ImageStyle,
-  src?: string
+  src?: string,
+  colors: Array<string>,
+  locations?: Array<number>
+  angle?: number
+}
+
+const linearMap = new Map([
+  ['top', 0],
+  ['bottom', 180],
+  ['left', 270],
+  ['right', 90]
+])
+
+// 对角线角度
+const diagonalAngleMap: Record<string, (width: number, height: number) => any> = {
+  'top right': (width: number, height: number) => {
+    return Math.acos(
+      (width / 2) /
+      (Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 2)
+    )
+  },
+  'right top': (width, height) => { return diagonalAngleMap['top right'](width, height) },
+
+  'bottom right': (width, height) => Math.PI - diagonalAngleMap['top right'](width, height),
+  'right bottom': (width, height) => { return diagonalAngleMap['bottom right'](width, height) },
+
+  'bottom left': (width, height) => Math.PI + diagonalAngleMap['top right'](width, height),
+  'left bottom': (width, height) => { return diagonalAngleMap['bottom left'](width, height) },
+
+  'top left': (width, height) => (2 * Math.PI) - diagonalAngleMap['top right'](width, height),
+  'left top': (width, height) => { return diagonalAngleMap['top left'](width, height) }
+}
+
+// 弧度转化为角度的公式
+function radToAngle (r: number) {
+  return r * 180 / Math.PI
 }
 
 const applyHandlers = (handlers: Handler[], args: any[]) => {
-  for (let handler of handlers) {
+  for (const handler of handlers) {
     handler(...args)
   }
 }
 
-const checkNeedLayout = (style: PreImageInfo) => {
-  const [width, height] = style.sizeList
-  const bp = style.backgroundPosition
+const isPercent = (val: string | number | undefined): val is string => typeof val === 'string' && PERCENT_REGEX.test(val)
+
+const isBackgroundSizeKeyword = (val: string | number): boolean => typeof val === 'string' && /^cover|contain$/.test(val)
+
+const isNeedLayout = (preImageInfo: PreImageInfo): boolean => {
+  const { sizeList, backgroundPosition, linearInfo } = preImageInfo
+  const [width, height] = sizeList
+  const bp = backgroundPosition
+
   // 含有百分号，center 需计算布局
-  const containPercentSymbol = typeof bp[1] === 'string' && PERCENT_REGEX.test(bp[1]) || typeof bp[3] === 'string' && PERCENT_REGEX.test(bp[3])
+  return isBackgroundSizeKeyword(width) ||
+    (isPercent(height) && width === 'auto') ||
+    (isPercent(width) && height === 'auto') ||
+    isPercent(bp[1]) ||
+    isPercent(bp[3]) ||
+    isDiagonalAngle(linearInfo)
+}
 
+const checkNeedLayout = (preImageInfo: PreImageInfo) => {
+  const { sizeList } = preImageInfo
+  const [width] = sizeList
+  // 在渐变的时候，background-size的cover，contain, auto属性值，转化为100%, needLayout计算逻辑和原来保持一致，needImageSize始终为false
   return {
     // 是否开启layout的计算
-    needLayout: typeof width === 'string' && /^cover|contain$/.test(width) || (typeof height === 'string' && PERCENT_REGEX.test(height) && width === 'auto') || (typeof width === 'string' && PERCENT_REGEX.test(width) && height === 'auto') || containPercentSymbol,
+    needLayout: isNeedLayout(preImageInfo),
     // 是否开启原始宽度的计算
-    needImageSize: typeof width === 'string' && /^cover|contain$/.test(width) || style.sizeList.includes('auto')
+    needImageSize: isBackgroundSizeKeyword(width) || sizeList.includes('auto')
   }
 }
 
@@ -85,14 +149,14 @@ const checkNeedLayout = (style: PreImageInfo) => {
 * lh - 容器的高度
 * ratio - 原始图片的宽高比
 * **/
-function calculateSize(h: number, ratio: number, lh?: number | boolean, reverse: boolean = false): Size | null {
-  let height = 0, width = 0
+function calculateSize (h: number, ratio: number, lh?: number | boolean, reverse = false): Size | null {
+  let height = 0; let width = 0
 
   if (typeof lh === 'boolean') {
     reverse = lh
   }
 
-  if (typeof h === 'string' && PERCENT_REGEX.test(h)) { // auto  px/rpx 
+  if (isPercent(h)) { // auto  px/rpx
     if (!lh) return null
     height = (parseFloat(h) / 100) * (lh as number)
     width = height * ratio
@@ -112,11 +176,11 @@ function calculateSize(h: number, ratio: number, lh?: number | boolean, reverse:
  * ch - 容器的高度
  * val - 用户设置的百分比
  * **/
-function calculateSizePosition(h: number, ch: number, val: string): number {
+function calculateSizePosition (h: number, ch: number, val: string): number {
   if (!h || !ch) return 0
 
   // 百分比需要单独的计算
-  if (typeof h === 'string' && PERCENT_REGEX.test(h)) {
+  if (isPercent(h)) {
     h = ch * parseFloat(h) / 100
   }
 
@@ -124,16 +188,25 @@ function calculateSizePosition(h: number, ch: number, val: string): number {
   return (ch - h) * parseFloat(val) / 100
 }
 
-function backgroundPosition(imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
+/**
+* 获取图片的展示宽高
+* h - 用户设置的高度
+* lh - 容器的高度
+* **/
+const calcPercent = (h: NumberVal, lh: number) => {
+  return isPercent(h) ? parseFloat(h) / 100 * lh : +h
+}
+
+function backgroundPosition (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
   const bps = preImageInfo.backgroundPosition
   if (bps.length === 0) return
-  let style: Position = {}
-  let imageStyle: ImageStyle = imageProps.style || {}
+  const style: Position = {}
+  const imageStyle: ImageStyle = imageProps.style || {}
 
   for (let i = 0; i < bps.length; i += 2) {
-    let key = bps[i] as PositionKey, val = bps[i + 1]
+    const key = bps[i] as PositionKey; const val = bps[i + 1]
     // 需要获取 图片宽度 和 容器的宽度 进行计算
-    if (typeof val === 'string' && PERCENT_REGEX.test(val)) {
+    if (isPercent(val)) {
       if (i === 0) {
         style[key] = calculateSizePosition(imageStyle.width as number, layoutInfo?.width, val)
       } else {
@@ -148,12 +221,11 @@ function backgroundPosition(imageProps: ImageProps, preImageInfo: PreImageInfo,
     ...imageProps.style as ImageStyle,
     ...style
   }
-
 }
 
 // background-size 转换
-function backgroundSize(imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
-  let sizeList = preImageInfo.sizeList
+function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
+  const sizeList = preImageInfo.sizeList
   if (!sizeList) return
   const { width: layoutWidth, height: layoutHeight } = layoutInfo || {}
   const { width: imageSizeWidth, height: imageSizeHeight } = imageSize || {}
@@ -166,12 +238,12 @@ function backgroundSize(imageProps: ImageProps, preImageInfo: PreImageInfo, imag
   // 枚举值
   if (typeof width === 'string' && ['cover', 'contain'].includes(width)) {
     if (layoutInfo && imageSize) {
-      let layoutRatio = layoutWidth / imageSizeWidth
-      let eleRatio = imageSizeWidth / imageSizeHeight
+      const layoutRatio = layoutWidth / imageSizeWidth
+      const eleRatio = imageSizeWidth / imageSizeHeight
       // 容器宽高比 大于 图片的宽高比，依据宽度作为基准，否则以高度为基准
-      if (layoutRatio <= eleRatio && (width as string) === 'contain' || layoutRatio >= eleRatio && (width as string) === 'cover') {
+      if ((layoutRatio <= eleRatio && (width as string) === 'contain') || (layoutRatio >= eleRatio && (width as string) === 'cover')) {
         dimensions = calculateSize(layoutWidth as number, imageSizeHeight / imageSizeWidth, true) as Size
-      } else if (layoutRatio > eleRatio && (width as string) === 'contain' || layoutRatio < eleRatio && (width as string) === 'cover') {
+      } else if ((layoutRatio > eleRatio && (width as string) === 'contain') || (layoutRatio < eleRatio && (width as string) === 'cover')) {
         dimensions = calculateSize(layoutHeight as number, imageSizeWidth / imageSizeHeight) as Size
       }
     }
@@ -194,9 +266,9 @@ function backgroundSize(imageProps: ImageProps, preImageInfo: PreImageInfo, imag
       // 数值类型设置为 stretch
       (imageProps.style as ImageStyle).resizeMode = 'stretch'
       dimensions = {
-        width: typeof width === 'string' && PERCENT_REGEX.test(width) ? width : +width! as number,
-        height: typeof height === 'string' && PERCENT_REGEX.test(height) ? height : +height! as number
-      }
+        width: isPercent(width) ? width : +width,
+        height: isPercent(height) ? height : +height
+      } as { width: NumberVal, height: NumberVal }
     }
   }
   // 样式合并
@@ -207,8 +279,32 @@ function backgroundSize(imageProps: ImageProps, preImageInfo: PreImageInfo, imag
 }
 
 // background-image转换为source
-function backgroundImage(imageProps: ImageProps, preImageInfo: PreImageInfo) {
-  imageProps.src = preImageInfo.src
+function backgroundImage (imageProps: ImageProps, preImageInfo: PreImageInfo) {
+  if (preImageInfo.src) {
+    imageProps.src = preImageInfo.src
+  }
+}
+
+// 渐变的转换
+function linearGradient (imageProps: ImageProps, preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) {
+  const { type, linearInfo } = preImageInfo
+  const { colors = [], locations, direction = '' } = linearInfo || {}
+  const { width, height } = imageSize || {}
+
+  if (type !== 'linear') return
+
+  // 角度计算
+  let angle = +(linearMap.get(direction) || direction.match(/(-?\d+(\.\d+)?)deg/)?.[1] || 180) % 360
+
+  // 对角线角度计算
+  if (layoutInfo && diagonalAngleMap[direction] && imageSize && linearInfo) {
+    angle = radToAngle(diagonalAngleMap[direction](width, height)) || 180
+  }
+
+  // 赋值
+  imageProps.colors = colors
+  imageProps.locations = locations
+  imageProps.angle = angle
 }
 
 const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) => {
@@ -218,23 +314,23 @@ const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutIn
       resizeMode: 'cover' as ImageResizeMode,
       position: 'absolute'
       // ...StyleSheet.absoluteFillObject
-    }
+    },
+    colors: []
   }
-  applyHandlers([backgroundSize, backgroundImage, backgroundPosition], [imageProps, preImageInfo, imageSize, layoutInfo])
-  if (!imageProps?.src) return null
+  applyHandlers([backgroundSize, backgroundImage, backgroundPosition, linearGradient], [imageProps, preImageInfo, imageSize, layoutInfo])
+
   return imageProps
 }
 
-function isHorizontal(val: PositionVal): val is 'left' | 'right' {
+function isHorizontal (val: PositionVal): val is 'left' | 'right' {
   return typeof val === 'string' && /^(left|right)$/.test(val)
 }
 
-function isVertical(val: PositionVal): val is 'top' | 'bottom' {
+function isVertical (val: PositionVal): val is 'top' | 'bottom' {
   return typeof val === 'string' && /^(top|bottom)$/.test(val)
 }
 
-function normalizeBackgroundPosition(parts: PositionVal[]): backgroundPositionList {
-
+function normalizeBackgroundPosition (parts: PositionVal[]): backgroundPositionList {
   if (parts.length === 0) return []
 
   // 定义默认值
@@ -299,71 +395,184 @@ function normalizeBackgroundPosition(parts: PositionVal[]): backgroundPositionLi
   return [hStart, hOffset, vStart, vOffset] as backgroundPositionList
 }
 
-function preParseImage(imageStyle?: ExtendedViewStyle) {
+/**
+ *
+ * calcSteps - 计算起始位置和终点位置之间的差值
+ *    startVal - 起始位置距离
+ *    endVal - 终点位置距离
+ *    len - 数量
+ * **/
+function calcSteps (startVal: number, endVal: number, len: number) {
+  const diffVal = endVal - startVal
+  const step = diffVal / len
+  const newArr: Array<number> = []
+  for (let i = 1; i < len; i++) {
+    const val = startVal + step * i
+    newArr.push(+val.toFixed(2))
+  }
+
+  return newArr
+}
+
+function parseLinearGradient (text: string): LinearInfo | undefined {
+  let linearText = text.trim().match(/linear-gradient\((.*)\)/)?.[1]
+  if (!linearText) return
+
+  // 添加默认的角度
+  if (!/^to|^-?\d+deg/.test(linearText)) {
+    linearText = '180deg ,' + linearText
+  } else {
+    linearText = linearText.replace('to', '')
+  }
+
+  // 把 0deg, red 10%, blue 20% 解析为 ['0deg', 'red, 10%', 'blue, 20%']
+  const [direction, ...colorList] = linearText.split(/,(?![^(#]*\))/)
+  // 记录需要填充起点的起始位置
+  let startIdx = 0; let startVal = 0
+  // 把 ['red, 10%', 'blue, 20%']解析为 [[red, 10%], [blue, 20%]]
+  const linearInfo = colorList.map(item => item.trim().split(/(?<!,)\s+/))
+    .reduce<LinearInfo>((prev, cur, idx, self) => {
+      const { colors, locations } = prev
+      const [color, val] = cur
+      let numberVal: number = parseFloat(val) / 100
+
+      // 处理渐变默认值
+      if (idx === 0) {
+        numberVal = numberVal || 0
+      } else if (self.length - 1 === idx) {
+        numberVal = numberVal || 1
+      }
+
+      // 出现缺省值时进行填充
+      if (idx - startIdx > 1 && !isNaN(numberVal)) {
+        locations.push(...calcSteps(startVal, numberVal, idx - startIdx))
+      }
+
+      if (!isNaN(numberVal)) {
+        startIdx = idx
+        startVal = numberVal
+      }
 
-  const { backgroundImage, backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {}
-  const src = parseUrl(backgroundImage)
+      // 添加color的数组
+      colors.push(color.trim())
 
-  let sizeList = backgroundSize.slice() as DimensionValue[]
+      !isNaN(numberVal) && locations.push(numberVal)
+      return prev
+    }, { colors: [], locations: [] })
+
+  return {
+    ...linearInfo,
+    direction: direction.trim()
+  }
+}
+
+function parseBgImage (text: string): {
+  linearInfo?: LinearInfo;
+  direction?: string;
+  type?: 'image' | 'linear'
+  src?: string
+} {
+  if (!text) return {}
 
-  sizeList.length === 1 && sizeList.push('auto')
+  const src = parseUrl(text)
+  if (src) return { src, type: 'image' }
+
+  const linearInfo = parseLinearGradient(text)
+  if (!linearInfo) return {}
+  return {
+    linearInfo,
+    type: 'linear'
+  }
+}
+
+function normalizeBackgroundSize (backgroundSize: Exclude<ExtendedViewStyle['backgroundSize'], undefined>, type: 'image' | 'linear' | undefined) {
+  const sizeList = backgroundSize.slice()
+  if (sizeList.length === 1) sizeList.push('auto')
+
+  if (type === 'linear') {
+    // 处理当使用渐变的时候，background-size出现cover, contain, auto，当作100%处理
+    for (const i in sizeList) {
+      const val = sizeList[i]
+      sizeList[i] = /^cover|contain|auto$/.test(val as string) ? '100%' : val
+    }
+  }
+
+  return sizeList
+}
+
+function preParseImage (imageStyle?: ExtendedViewStyle) {
+  const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {}
+  const { type, src, linearInfo } = parseBgImage(backgroundImage)
 
   return {
     src,
-    sizeList,
+    linearInfo,
+    type,
+    sizeList: normalizeBackgroundSize(backgroundSize, type),
     backgroundPosition: normalizeBackgroundPosition(backgroundPosition)
   }
 }
 
-function wrapImage(imageStyle?: ExtendedViewStyle) {
-  const [show, setShow] = useState<boolean>(false)
-  const [, setImageSizeWidth] = useState<number | null>(null)
-  const [, setImageSizeHeight] = useState<number | null>(null)
-  const [, setLayoutInfoWidth] = useState<number | null>(null)
-  const [, setLayoutInfoHeight] = useState<number | null>(null)
-  const sizeInfo = useRef<Size | null>(null)
-  const layoutInfo = useRef<Size | null>(null)
+function isDiagonalAngle (linearInfo?: LinearInfo): boolean {
+  return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction])
+}
 
-  // 预解析
+function wrapImage (imageStyle?: ExtendedViewStyle) {
+  // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
+  // 预解析
+  const { src, sizeList, type } = preImageInfo
 
   // 判断是否可挂载onLayout
   const { needLayout, needImageSize } = checkNeedLayout(preImageInfo)
-  const { src } = preImageInfo
 
+  const [show, setShow] = useState<boolean>(((type === 'image' && !!src) || type === 'linear') && !needLayout && !needImageSize)
+  const [, setImageSizeWidth] = useState<number | null>(null)
+  const [, setImageSizeHeight] = useState<number | null>(null)
+  const [, setLayoutInfoWidth] = useState<number | null>(null)
+  const [, setLayoutInfoHeight] = useState<number | null>(null)
+  const sizeInfo = useRef<Size | null>(null)
+  const layoutInfo = useRef<Size | null>(null)
   useEffect(() => {
-    if(!src) {
-      setShow(false)
-      sizeInfo.current = null
-      layoutInfo.current = null
-      return 
+    sizeInfo.current = null
+    if (type === 'linear') {
+      if (!needLayout) setShow(true)
+      return
     }
 
-    if (!needImageSize) {
+    if (!src) {
+      setShow(false)
+      return
+    // 一开始未出现，数据改变时出现
+    } else if (!(needLayout || needImageSize)) {
       setShow(true)
       return
     }
-    Image.getSize(src, (width, height) => {
-      sizeInfo.current = {
-        width,
-        height
-      }
-      //1. 当需要绑定onLayout 2. 获取到布局信息
-      if (!needLayout || layoutInfo.current) {
-        setImageSizeWidth(width)
-        setImageSizeHeight(height)
-        if(layoutInfo.current) {
-          setLayoutInfoWidth(layoutInfo.current.width)
-          setLayoutInfoHeight(layoutInfo.current.height)
+
+    if (needImageSize) {
+      Image.getSize(src, (width, height) => {
+        sizeInfo.current = {
+          width,
+          height
         }
-        setShow(true)
-      }
-    })
-  }, [preImageInfo?.src])
+        // 1. 当需要绑定onLayout 2. 获取到布局信息
+        if (!needLayout || layoutInfo.current) {
+          setImageSizeWidth(width)
+          setImageSizeHeight(height)
+          if (layoutInfo.current) {
+            setLayoutInfoWidth(layoutInfo.current.width)
+            setLayoutInfoHeight(layoutInfo.current.height)
+          }
+          setShow(true)
+        }
+      })
+    }
+  // type 添加type 处理无渐变 有渐变的场景
+  }, [src, type])
 
-  if (!preImageInfo?.src) return null
+  if (!type) return null
 
-  const onLayout = (res: LayoutChangeEvent ) => {
+  const onLayout = (res: LayoutChangeEvent) => {
     const { width, height } = res?.nativeEvent?.layout || {}
     layoutInfo.current = {
       width,
@@ -372,90 +581,75 @@ function wrapImage(imageStyle?: ExtendedViewStyle) {
     if (!needImageSize) {
       setLayoutInfoWidth(width)
       setLayoutInfoHeight(height)
+      // 有渐变角度的时候，才触发渲染组件
+      if (type === 'linear') {
+        sizeInfo.current = {
+          width: calcPercent(sizeList[0] as NumberVal, width),
+          height: calcPercent(sizeList[1] as NumberVal, height)
+        }
+        setImageSizeWidth(sizeInfo.current.width)
+        setImageSizeHeight(sizeInfo.current.height)
+        setShow(true)
+      }
     } else if (sizeInfo.current) {
       setLayoutInfoWidth(width)
       setLayoutInfoHeight(height)
       setImageSizeWidth(sizeInfo.current.width)
-      setImageSizeHeight(sizeInfo.current.height)  
+      setImageSizeHeight(sizeInfo.current.height)
       setShow(true)
     }
   }
 
-  return <View key='viewBgImg' {...needLayout ? { onLayout } : null } style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
-    {show && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
+  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
+    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
+    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
   </View>
 }
 
-function wrapChildren(children: ReactNode | ReactNode[], props: _ViewProps, textStyle?: StyleProp<TextStyle>, imageStyle?: ExtendedViewStyle) {
-  const { textProps } = splitProps(props)
-  const { 'enable-background-image': enableBackgroundImage } = props
+interface WrapChildrenConfig {
+  hasVarDec: boolean
+  enableBackground: boolean
+  textStyle?: TextStyle
+  backgroundStyle?: ExtendedViewStyle
+  varContext?: Record<string, any>
+  textProps?: Record<string, any>
+}
 
-  if (every(children as ReactNode[], (child) => isText(child))) {
-    if (textStyle || textProps) {
-      transformTextStyle(textStyle as TextStyle)
-      children = <Text key='viewTextWrap' style={textStyle} {...(textProps || {})}>{children}</Text>
-    }
-  } else {
-    if (textStyle) throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the view is Text node!')
-  }
+function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }: WrapChildrenConfig) {
+  const children = wrapChildren(props, {
+    hasVarDec,
+    varContext,
+    textStyle,
+    textProps
+  })
 
   return [
-    enableBackgroundImage ? wrapImage(imageStyle) : null,
+    enableBackground ? wrapImage(backgroundStyle) : null,
     children
   ]
 }
 
-const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref): JSX.Element => {
-  const combinationStyleProps = [{
-    key: 'transform',
-    rules: {
-      width: 'translateX',
-      height: 'translateY'
-    }
-  }, {
-    key: 'borderTopLeftRadius',
-    rules: {
-      width: 'borderTopLeftRadius'
-    }
-  }, {
-    key: 'borderBottomLeftRadius',
-    rules: {
-      width: 'borderBottomLeftRadius'
-    }
-  }, {
-    key: 'borderBottomRightRadius',
-    rules: {
-      height: 'borderBottomRightRadius'
-    }
-  }, {
-    key: 'borderTopRightRadius',
-    rules: {
-      height: 'borderTopRightRadius'
-    }
-  }]
-  const {
+const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(viewProps)
+  let {
     style = {},
-    children,
-    hoverStyle,
+    'hover-style': hoverStyle,
     'hover-start-time': hoverStartTime = 50,
     'hover-stay-time': hoverStayTime = 400,
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'enable-background': enableBackground,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
   } = props
 
   const [isHover, setIsHover] = useState(false)
-  let transformStyle = {}
-
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [containerHeight, setContainerHeight] = useState(0)
-
-  const layoutRef = useRef({})
 
-  // 打平 style 数组
-  const styleObj: ExtendedViewStyle = normalizeStyle(style)
   // 默认样式
   const defaultStyle: ExtendedViewStyle = {
     // flex 布局相关的默认样式
-    ...styleObj.display === 'flex' && {
+    ...style.display === 'flex' && {
       flexDirection: 'row',
       flexBasis: 'auto',
       flexShrink: 1,
@@ -463,22 +657,33 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref):
     }
   }
 
-  const hasPercentStyle = combinationStyleProps.some(({ key, rules }) => {
-    return Object.entries(rules).some(([dimension, transformKey]) => {
-      const transformItemValue = styleObj[key]
-      if (transformItemValue) {
-        if (Array.isArray(transformItemValue)) {
-          const transformValue = transformItemValue.find((item: Record<string, any>) => item.hasOwnProperty(transformKey))
-          return transformValue && PERCENT_REGEX.test(transformValue[transformKey])
-        } else if (typeof transformItemValue === 'string') {
-          return PERCENT_REGEX.test(transformItemValue)
-        }
-      }
-    })
+  const styleObj: ExtendedViewStyle = {
+    ...defaultStyle,
+    ...style,
+    ...(isHover ? hoverStyle : null)
+  }
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    hasVarDec,
+    varContextRef,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
   })
 
-  if (hasPercentStyle) {
-    transformStyle = percentTransform(combinationStyleProps, { width: containerWidth, height: containerHeight })
+  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+
+  enableBackground = enableBackground || !!backgroundStyle
+  const enableBackgroundRef = useRef(enableBackground)
+  if (enableBackgroundRef.current !== enableBackground) {
+    throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.')
   }
 
   const { nodeRef } = useNodesRef<View, _ViewProps>(props, ref, {
@@ -512,104 +717,37 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref):
     }, +hoverStayTime)
   }
 
-  function onTouchStart(e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchstart } = props;
+  function onTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
+    const { bindtouchstart } = props
     bindtouchstart && bindtouchstart(e)
     setStartTimer()
   }
 
-  function onTouchEnd(e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchend } = props;
+  function onTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
+    const { bindtouchend } = props
     bindtouchend && bindtouchend(e)
     setStayTimer()
   }
 
-
-  function percentTransform(style: string[] | Record<string, any>, { width, height }: { width?: number, height?: number }) {
-    const styleMap: Record<string, any> = {}
-    style.forEach((styleItem: Record<string, any>) => {
-      const transformItemValue = styleObj[styleItem.key]
-      if (Array.isArray(transformItemValue)) {
-        const transformStyle: Record<string, any>[] = []
-        styleObj[styleItem.key].forEach((transformItem: Record<string, any>) => {
-          const rules = styleItem.rules
-          for (const type in rules) {
-            const value = transformItem[rules[type]]
-            if (value !== undefined) {
-              if (PERCENT_REGEX.test(value)) {
-                const percentage = parseFloat(value) / 100;
-                if (type === 'height' && height) {
-                  transformStyle.push({ [rules[type]]: percentage * height });
-                } else if (type === 'width' && width) {
-                  transformStyle.push({ [rules[type]]: percentage * width });
-                } else {
-                  transformStyle.push({ [rules[type]]: 0 });
-                }
-              } else {
-                transformStyle.push(transformItem);
-              }
-            }
-          }
-        })
-        styleMap[styleItem.key] = transformStyle
-      } else if (typeof transformItemValue === 'string') {
-        const rules = styleItem.rules
-        for (const type in rules) {
-          if (transformItemValue) {
-            if (PERCENT_REGEX.test(transformItemValue)) {
-              const percentage = parseFloat(transformItemValue) / 100;
-              if (type === 'height' && height) {
-                styleMap[styleItem.key] = percentage * height
-              } else if (type === 'width' && width) {
-                styleMap[styleItem.key] = percentage * width
-              } else {
-                styleMap[styleItem.key] = 0
-              }
-            } else {
-              styleMap[styleItem.key] = transformItemValue
-            }
-          }
-        }
-      }
-    })
-    return styleMap
-  }
-  const onLayout = (res: LayoutChangeEvent) => {
-    if (hasPercentStyle) {
-      const { width, height } = res?.nativeEvent?.layout || {}
-      setContainerWidth(width || 0)
-      setContainerHeight(height || 0)
-    }
-    if (enableOffset) {
-      nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-      })
-    }
-  }
-  const { textStyle, imageStyle, innerStyle } = splitStyle({
-    ...defaultStyle,
-    ...styleObj,
-    ...(isHover ? hoverStyle : null)
-  })
-
-  const needLayout = enableOffset || hasPercentStyle
+  const {
+    layoutRef,
+    layoutStyle,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    ...needLayout ? { onLayout } : {},
+    style: { ...innerStyle, ...layoutStyle },
+    ...layoutProps,
     ...(hoverStyle && {
       bindtouchstart: onTouchStart,
       bindtouchend: onTouchEnd
     })
   }, [
-    'style',
-    'children',
     'hover-start-time',
     'hover-stay-time',
-    'hoverStyle',
-    'hover-class',
-    'enable-offset',
-    'enable-background-image'
+    'hover-style',
+    'hover-class'
   ], {
     layoutRef
   })
@@ -617,9 +755,20 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref):
   return (
     <View
       {...innerProps}
-      style={{ ...innerStyle, ...transformStyle }}
     >
-      {wrapChildren(children, props, textStyle, imageStyle)}
+      {
+        wrapWithChildren(
+          props,
+          {
+            hasVarDec,
+            enableBackground: enableBackgroundRef.current,
+            textStyle,
+            backgroundStyle,
+            varContext: varContextRef.current,
+            textProps
+          }
+        )
+      }
     </View>
   )
 })
@@ -627,4 +776,3 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((props, ref):
 _View.displayName = 'mpx-view'
 
 export default _View
-