@mpxjs/webpack-plugin 2.10.2 → 2.10.3-beta.1

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
 import { View, StyleSheet } from 'react-native'
-import { extendObject } from '../utils'
 
 export type State = {
   portals: Array<{
@@ -27,7 +26,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
     setState((prevState) => ({
       portals: prevState.portals.map((item) => {
         if (item.key === key) {
-          return extendObject({}, item, { children })
+          return Object.assign({}, item, { children })
         }
         return item
       })

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

@@ -70,6 +70,7 @@ interface ScrollViewProps {
   'parent-height'?: number;
   'wait-for'?: Array<GestureHandler>;
   'simultaneous-handlers'?: Array<GestureHandler>;
+  'scroll-event-throttle'?:number;
   bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -140,6 +141,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
+    'scroll-event-throttle': scrollEventThrottle = 0,
     __selectRef
   } = props
 
@@ -159,7 +161,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     visibleLength: 0
   })
 
-  const scrollEventThrottle = 50
   const hasCallScrollToUpper = useRef(true)
   const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -202,6 +203,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
+  const lastOffset = useRef(0)
+
   if (scrollX && scrollY) {
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
@@ -263,7 +266,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function onStartReached (e: NativeSyntheticEvent<NativeScrollEvent>) {
     const { bindscrolltoupper } = props
     const { offset } = scrollOptions.current
-    if (bindscrolltoupper && (offset <= upperThreshold)) {
+    const isScrollingBackward = offset < lastOffset.current
+    if (bindscrolltoupper && (offset <= upperThreshold) && isScrollingBackward) {
       if (!hasCallScrollToUpper.current) {
         bindscrolltoupper(
           getCustomEvent('scrolltoupper', e, {
@@ -284,13 +288,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { bindscrolltolower } = props
     const { contentLength, visibleLength, offset } = scrollOptions.current
     const distanceFromEnd = contentLength - visibleLength - offset
-    if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
+    const isScrollingForward = offset > lastOffset.current
+
+    if (bindscrolltolower && (distanceFromEnd < lowerThreshold) && isScrollingForward) {
       if (!hasCallScrollToLower.current) {
         hasCallScrollToLower.current = true
         bindscrolltolower(
           getCustomEvent('scrolltolower', e, {
             detail: {
-              direction: scrollX ? 'right' : 'botttom'
+              direction: scrollX ? 'right' : 'bottom'
             },
             layoutRef
           }, props)
@@ -345,6 +351,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    // 在 onStartReached、onEndReached 执行完后更新 lastOffset
+    lastOffset.current = scrollOptions.current.offset
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -367,6 +375,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     onStartReached(e)
     onEndReached(e)
     updateIntersection()
+    lastOffset.current = scrollOptions.current.offset
   }
   function updateIntersection () {
     if (enableTriggerIntersectionObserver && intersectionObservers) {

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

@@ -0,0 +1,32 @@
+import { View, ViewProps, TextStyle } from 'react-native'
+import { createElement, forwardRef, useRef } from 'react'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { extendObject, splitProps, splitStyle, wrapChildren } from './utils'
+
+const _View2 = forwardRef<HandlerRef<View, ViewProps>, ViewProps>((simpleViewProps: ViewProps, ref) => {
+  const nodeRef = useRef(null)
+
+  const { textProps, innerProps: props = {} } = splitProps(simpleViewProps)
+
+  const { textStyle, innerStyle = {} } = splitStyle(props.style || {})
+
+  useNodesRef(props, ref, nodeRef, {
+    style: innerStyle || {}
+  })
+
+  return createElement(View, extendObject({}, props, {
+    style: innerStyle,
+    ref: nodeRef
+  }), wrapChildren(
+    props,
+    {
+      hasVarDec: false,
+      textStyle: textStyle as TextStyle,
+      textProps
+    }
+  ))
+})
+
+_View2.displayName = 'MpxSimpleView'
+
+export default _View2

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

@@ -16,6 +16,7 @@ import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wra
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
+import Portal from './mpx-portal'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -79,7 +80,7 @@ type PreImageInfo = {
 type ImageProps = {
   style: ImageStyle,
   src?: string,
-  source?: {uri: string },
+  source?: { uri: string },
   colors: Array<string>,
   locations?: Array<number>
   angle?: number
@@ -483,8 +484,8 @@ function parseLinearGradient (text: string): LinearInfo | undefined {
 }
 
 function parseBgImage (text: string): {
-  linearInfo?: LinearInfo;
-  direction?: string;
+  linearInfo?: LinearInfo
+  direction?: string
   type?: 'image' | 'linear'
   src?: string
 } {
@@ -578,7 +579,7 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
     if (!src) {
       setShow(false)
       return
-    // 一开始未出现，数据改变时出现
+      // 一开始未出现，数据改变时出现
     } else if (!(needLayout || needImageSize)) {
       setShow(true)
       return
@@ -602,7 +603,7 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
         }
       })
     }
-  // type 添加type 处理无渐变 有渐变的场景
+    // type 添加type 处理无渐变 有渐变的场景
   }, [src, type])
 
   if (!type) return null
@@ -636,7 +637,7 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
   }
 
   return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} /> }
+    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
     {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage))}
   </View>
 }
@@ -703,6 +704,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   const {
     normalStyle,
     hasSelfPercent,
+    hasPositionFixed,
     hasVarDec,
     varContextRef,
     setWidth,
@@ -769,13 +771,18 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  const BaseComponent = enableStyleAnimation
+  let finalComponent: JSX.Element = enableStyleAnimation
     ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
 
-  return enableHover
-    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, BaseComponent)
-    : BaseComponent
+  if (enableHover) {
+    finalComponent = createElement(GestureDetector, { gesture: gesture as PanGesture }, finalComponent)
+  }
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+  return finalComponent
 })
 
 _View.displayName = 'MpxView'

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

@@ -89,7 +89,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       button: 'Reload'
     }
   }
-  const currentErrorText = errorText[(mpx.i18n.locale as LanguageCode) || 'zh-CN']
+  const currentErrorText = errorText[(mpx.i18n?.locale as LanguageCode) || 'zh-CN']
 
   if (props.style) {
     warn('The web-view component does not support the style prop.')
@@ -103,11 +103,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const statusCode = useRef<string|number>('')
   const [isLoaded, setIsLoaded] = useState<boolean>(true)
   const defaultWebViewStyle = {
-    position: 'absolute' as 'absolute' | 'relative' | 'static',
-    left: 0 as number,
-    right: 0 as number,
-    top: 0 as number,
-    bottom: 0 as number
+    position: 'absolute' as const,
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
   }
   const canGoBack = useRef<boolean>(false)
   const isNavigateBack = useRef<boolean>(false)
@@ -140,7 +140,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _reload = function () {
-    if (__mpx_mode__ === 'android') {
+    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
       fristLoaded.current = false // 安卓需要重新设置
     }
     setPageLoadErr(false)
@@ -186,7 +186,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
-    if (__mpx_mode__ === 'android') {
+    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
       canGoBack.current = event.nativeEvent.canGoBack
     }
   }
@@ -302,8 +302,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
   }
   const onLoadEnd = function (res: WebViewEvent) {
-    if (__mpx_mode__ === 'android') {
-      res.persist()
+    res.persist()
+    if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
       setTimeout(() => {
         onLoadEndHandle(res)
       }, 0)
@@ -329,7 +329,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   return (
-      <Portal key={pageLoadErr ? 'error' : 'webview'}>
+      <Portal>
         {pageLoadErr
           ? (
             <View style={[styles.loadErrorContext, defaultWebViewStyle]}>

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

@@ -46,7 +46,7 @@ interface InnerRef {
   };
 }
 interface UseInnerPropsConfig {
-  layoutRef: LayoutRef;
+  layoutRef?: LayoutRef;
   disableTouch?: boolean;
   disableTap?: boolean
 }

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

@@ -1,4 +1,4 @@
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
 declare module '@mpxjs/utils' {
   export function isEmptyObject (obj: Object): boolean
   export function isFunction (fn: unknown): boolean

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -13,7 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
-import { error } from '@mpxjs/utils'
+import { error, hasOwn } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -50,20 +50,20 @@ const EasingKey = {
 const TransformInitial: ExtendedViewStyle = {
   // matrix: 0,
   // matrix3d: 0,
-  rotate: '0deg',
+  // rotate: '0deg',
   rotateX: '0deg',
   rotateY: '0deg',
   rotateZ: '0deg',
   // rotate3d:[0,0,0]
-  scale: 1,
+  // scale: 1,
   // scale3d: [1, 1, 1],
   scaleX: 1,
   scaleY: 1,
   // scaleZ: 1,
-  skew: 0,
+  // skew: 0,
   skewX: '0deg',
   skewY: '0deg',
-  translate: 0,
+  // translate: 0,
   // translate3d: 0,
   translateX: 0,
   translateY: 0
@@ -127,23 +127,23 @@ const parseTransform = (transformStr: string) => {
         case 'skewX':
         case 'skewY':
         case 'perspective':
+          // rotate 处理成 rotateZ
+          key = key === 'rotate' ? 'rotateZ' : key
           // 单个值处理
           transform.push({ [key]: global.__formatValue(val) })
           break
         case 'matrix':
-        case 'matrix3d':
           transform.push({ [key]: parseValues(val, ',').map(val => +val) })
           break
         case 'translate':
         case 'scale':
         case 'skew':
-        case 'rotate3d': // x y z angle
         case 'translate3d': // x y 支持 z不支持
         case 'scale3d': // x y 支持 z不支持
         {
           // 2 个以上的值处理
           key = key.replace('3d', '')
-          const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
+          const vals = parseValues(val, ',').splice(0, 3)
           // scale(.5) === scaleX(.5) scaleY(.5)
           if (vals.length === 1 && key === 'scale') {
             vals.push(vals[0])
@@ -167,6 +167,14 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
+// transform 数组转对象
+function getTransformObj (transforms: { [propName: string]: string | number }[]) {
+  'worklet'
+  return transforms.reduce((transformObj, item) => {
+    return Object.assign(transformObj, item)
+  }, {} as { [propName: string]: string | number })
+}
+
 export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
   const { style = {}, animation, enableAnimation } = props
 
@@ -187,7 +195,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   // 记录动画key的style样式值 没有的话设置为false
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
-  // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
+  // 记录上次style map
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -200,6 +210,12 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       return valMap
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
+  // ** style更新同步
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    // style 更新后同步更新 lastStyleRef & shareValMap
+    updateStyleVal()
+  }, [style])
   // ** 获取动画样式prop & 驱动动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
@@ -211,16 +227,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     // 驱动动画
     createAnimation(keys)
   }, [id])
-  // 同步style更新
-  // useEffect(() => {
-  //   Object.keys(animatedKeys.current).forEach(key => {
-  //     const originVal = getOriginalStyleVal(key, isTransform(key))
-  //     if (originVal && animatedKeys.current[key] !== originVal) {
-  //       animatedKeys.current[key] = originVal
-  //       shareValMap[key].value = originVal
-  //     }
-  //   })
-  // }, [style])
   // ** 清空动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
@@ -230,7 +236,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       })
     }
   }, [])
-  // 根据 animation action 创建&驱动动画 key => wi
+  // 根据 animation action 创建&驱动动画
   function createAnimation (animatedKeys: string[] = []) {
     const actions = animation?.actions || []
     const sequence = {} as { [propName: keyof ExtendedViewStyle]: (string|number)[] }
@@ -286,6 +292,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       : withTiming(value, { duration, easing })
     return delay ? withDelay(delay, animation) : animation
   }
+  // 获取样式初始值（prop style or 默认值）
   function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
     if (isTransform && Array.isArray(originalStyle.transform)) {
       let initialVal = InitialValue[key]
@@ -297,38 +304,19 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     }
     return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key]
   }
-  // 从 prop style 中获取样式初始值 没有为undefined
-  // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
-  //   if (isTransform && Array.isArray(originalStyle.transform)) {
-  //     let initialVal = undefined // InitialValue[key]
-  //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
-  //     originalStyle.transform.forEach(item => {
-  //       if (item[key] !== undefined) initialVal = item[key]
-  //     })
-  //     return initialVal
-  //   }
-  //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
-  // }
-  // 获取动画shareVal初始值（prop style or 默认值）
-  // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
-  //   const originalVal = getOriginalStyleVal(key, isTransform)
-  //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
-  // }
   // 循环 animation actions 获取所有有动画的 style prop name
   function getAnimatedStyleKeys () {
     return (animation?.actions || []).reduce((keyMap, action) => {
       const { rules, transform } = action
       const ruleArr = [...rules.keys(), ...transform.keys()]
       ruleArr.forEach(key => {
-        // const originalVal = getOriginalStyleVal(key, isTransform(key))
-        // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
         if (!keyMap[key]) keyMap[key] = true
       })
       return keyMap
     }, animatedKeys.current)
   }
   // animated key transform 格式化
-  function formatAnimatedKeys (keys: string[] = []) {
+  function formatAnimatedKeys (keys: string[]) {
     const animatedKeys = [] as (string|string[])[]
     const transforms = [] as string[]
     keys.forEach(key => {
@@ -341,13 +329,23 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     if (transforms.length) animatedKeys.push(transforms)
     return animatedKeys
   }
-  // transform 数组转对象
-  function getTransformObj () {
-    'worklet'
-    const transforms = originalStyle.transform || []
-    return transforms.reduce((transformObj, item) => {
-      return Object.assign(transformObj, item)
-    }, {} as { [propName: string]: string | number })
+  // 设置 lastShareValRef & shareValMap
+  function updateStyleVal () {
+    Object.entries(originalStyle).forEach(([key, value]) => {
+      if (key === 'transform') {
+        Object.entries(getTransformObj(value)).forEach(([key, value]) => {
+          if (value !== lastStyleRef.current[key]) {
+            lastStyleRef.current[key] = value
+            shareValMap[key].value = value
+          }
+        })
+      } else if (hasOwn(shareValMap, key)) {
+        if (value !== lastStyleRef.current[key]) {
+          lastStyleRef.current[key] = value
+          shareValMap[key].value = value
+        }
+      }
+    })
   }
   // ** 生成动画样式
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -356,7 +354,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
       if (Array.isArray(key)) {
-        const transformStyle = getTransformObj()
+        const transformStyle = getTransformObj(originalStyle.transform || [])
         key.forEach((transformKey) => {
           transformStyle[transformKey] = shareValMap[transformKey].value
         })

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

@@ -1,11 +1,11 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
+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 { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
 import { runOnJS } from 'react-native-reanimated'
 import { Gesture } from 'react-native-gesture-handler'
 
@@ -20,10 +20,11 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
-declare const __mpx_mode__: 'ios' | 'android'
+declare const __mpx_mode__: 'ios' | 'android' | 'harmony'
 
 export const isIOS = __mpx_mode__ === 'ios'
 export const isAndroid = __mpx_mode__ === 'android'
+export const isHarmony = __mpx_mode__ === 'harmony'
 
 const varDecRegExp = /^--/
 const varUseRegExp = /var\(/
@@ -291,12 +292,8 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const normalStyleChangedRef = useRef(false)
   let hasVarDec = false
   let hasVarUse = false
-  let hasSelfPercent = false
   const varKeyPaths: Array<Array<string>> = []
   const unoVarKeyPaths: Array<Array<string>> = []
-  const percentKeyPaths: Array<Array<string>> = []
-  const calcKeyPaths: Array<Array<string>> = []
-  const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
   const navigation = useNavigation()
@@ -359,6 +356,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   }
 
   const memoResult = useMemo(() => {
+    let hasSelfPercent = false
+    let hasPositionFixed = false
+    const percentKeyPaths: Array<Array<string>> = []
+    const calcKeyPaths: Array<Array<string>> = []
+    const envKeyPaths: Array<Array<string>> = []
     // transform can be memoized
     function envVisitor ({ value, keyPath }: VisitorArg) {
       if (envUseRegExp.test(value)) {
@@ -381,6 +383,13 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       }
     }
 
+    function transformPosition (styleObj: Record<string, any>) {
+      if (styleObj.position === 'fixed') {
+        hasPositionFixed = true
+        styleObj.position = 'absolute'
+      }
+    }
+
     // traverse env & calc & percent
     traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor])
 
@@ -412,12 +421,15 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
         }
       }
     })
+    // apply position
+    transformPosition(normalStyle)
     // transform number enum stringify
     transformStringify(normalStyle)
 
     return {
       normalStyle,
-      hasSelfPercent
+      hasSelfPercent,
+      hasPositionFixed
     }
   }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize])
 
@@ -515,8 +527,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       hasLayoutRef.current = true
       if (hasSelfPercent) {
         const { width, height } = e?.nativeEvent?.layout || {}
-        setWidth(width || 0)
-        setHeight(height || 0)
+        setWidth && setWidth(width || 0)
+        setHeight && setHeight(height || 0)
       }
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
@@ -643,7 +655,7 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
   }, {})
 }
 
-export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled }: { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
   const enableHoverRef = useRef(enableHover)
   if (enableHoverRef.current !== enableHover) {
     error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')