@mpxjs/webpack-plugin 2.10.1 → 2.10.3

package/lib/runtime/components/react/dist/{KeyboardAvoidingView.jsx → mpx-keyboard-avoiding-view.jsx}

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Keyboard, Platform, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
-import { extendObject } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const isIOS = Platform.OS === 'ios';
     const duration = isIOS ? 250 : 300;
@@ -10,16 +10,24 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    const dismiss = () => {
+        Keyboard.isVisible() && Keyboard.dismiss();
+    };
+    const gesture = useMemo(() => {
+        return Gesture.Tap()
+            .onEnd(() => {
+            dismiss();
+        }).runOnJS(true);
+    }, []);
     const animatedStyle = useAnimatedStyle(() => {
         return Object.assign({
             transform: [{ translateY: -offset.value }]
         }, isIOS ? {} : { flexBasis: basic.value });
     });
     const resetKeyboard = () => {
-        keyboardAvoid?.current && extendObject(keyboardAvoid.current, {
-            cursorSpacing: 0,
-            ref: null
-        });
+        if (keyboardAvoid?.current) {
+            keyboardAvoid.current = null;
+        }
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
@@ -34,7 +42,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                     const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
                     setTimeout(() => {
                         ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
+                            const aboveOffset = pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
@@ -77,13 +85,16 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style}>
-      <Animated.View style={[
+    return (<GestureDetector gesture={gesture}>
+      <View style={style}>
+        <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-        {children}
-      </Animated.View>
-    </View>);
+          {children}
+        </Animated.View>
+      </View>
+    </GestureDetector>);
 };
+KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx

@@ -1,6 +1,5 @@
 import { useState, useCallback, forwardRef, useImperativeHandle } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { extendObject } from '../utils';
 const _PortalManager = forwardRef((props, ref) => {
     const [state, setState] = useState({
         portals: []
@@ -14,7 +13,7 @@ const _PortalManager = forwardRef((props, ref) => {
         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/dist/mpx-scroll-view.jsx

@@ -41,7 +41,7 @@ import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, ext
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation = false, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, 'scroll-event-throttle': scrollEventThrottle = 0, __selectRef } = props;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
@@ -54,7 +54,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         scrollTop: 0,
         visibleLength: 0
     });
-    const scrollEventThrottle = 50;
     const hasCallScrollToUpper = useRef(true);
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
@@ -73,7 +72,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             pagingEnabled,
             fastDeceleration: false,
             decelerationDisabled: false,
-            scrollTo: scrollToOffset
+            scrollTo
         },
         gestureRef: scrollViewRef
     });
@@ -83,6 +82,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         };
     }, []);
     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');
     }
@@ -112,6 +112,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
         firstScrollIntoViewChange.current = true;
     }, [scrollIntoView]);
+    function scrollTo({ top = 0, left = 0, animated = false }) {
+        scrollToOffset(left, top, animated);
+    }
     function handleScrollIntoView() {
         const refs = __selectRef(`#${scrollIntoView}`, 'node');
         if (!refs)
@@ -130,7 +133,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     function onStartReached(e) {
         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, {
                     detail: {
@@ -149,12 +153,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         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));
@@ -203,6 +208,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         onStartReached(e);
         onEndReached(e);
         updateIntersection();
+        // 在 onStartReached、onEndReached 执行完后更新 lastOffset
+        lastOffset.current = scrollOptions.current.offset;
     }
     function onScrollEnd(e) {
         const { bindscrollend } = props;
@@ -222,6 +229,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         onStartReached(e);
         onEndReached(e);
         updateIntersection();
+        lastOffset.current = scrollOptions.current.offset;
     }
     function updateIntersection() {
         if (enableTriggerIntersectionObserver && intersectionObservers) {
@@ -230,9 +238,9 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             }
         }
     }
-    function scrollToOffset(x = 0, y = 0) {
+    function scrollToOffset(x = 0, y = 0, animated = scrollWithAnimation) {
         if (scrollViewRef.current) {
-            scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
+            scrollViewRef.current.scrollTo({ x, y, animated });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
             snapScrollLeft.current = x;

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

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+import { createElement, forwardRef, useRef } from 'react';
+import useNodesRef from './useNodesRef';
+import { extendObject, splitProps, splitStyle, wrapChildren } from './utils';
+const _View2 = forwardRef((simpleViewProps, 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,
+        textProps
+    }));
+});
+_View2.displayName = 'MpxSimpleView';
+export default _View2;

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

@@ -3,33 +3,33 @@
  *   Subtraction:
  *     type, password, confirm-hold
  *   Addition:
- *     - confirm-type: Not support `return`
+ *     ✔ confirm-type
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
 import { forwardRef, createElement } from 'react';
-import { Keyboard } from 'react-native';
 import Input from './mpx-input';
 import { omit, extendObject } from './utils';
 const DEFAULT_TEXTAREA_WIDTH = 300;
 const DEFAULT_TEXTAREA_HEIGHT = 150;
 const Textarea = forwardRef((props, ref) => {
-    const { style = {} } = props;
+    const { style = {}, 'confirm-type': confirmType = 'return' } = props;
     const restProps = omit(props, [
         'ref',
         'type',
         'style',
         'password',
         'multiline',
+        'confirm-type',
         'confirm-hold'
     ]);
     return createElement(Input, extendObject(restProps, {
-        ref: ref,
+        ref,
+        confirmType,
         multiline: true,
-        confirmType: 'next',
-        bindblur: () => Keyboard.dismiss(),
+        'confirm-type': confirmType,
         style: extendObject({
             width: DEFAULT_TEXTAREA_WIDTH,
             height: DEFAULT_TEXTAREA_HEIGHT

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

@@ -14,6 +14,7 @@ import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wra
 import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 import { GestureDetector } from 'react-native-gesture-handler';
+import Portal from './mpx-portal';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -555,7 +556,7 @@ const _View = forwardRef((viewProps, ref) => {
     const enableHover = !!hoverStyle;
     const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime });
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
-    const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
+    const { normalStyle, hasSelfPercent, hasPositionFixed, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
         parentFontSize,
@@ -600,12 +601,16 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    const BaseComponent = enableStyleAnimation
+    let finalComponent = enableStyleAnimation
         ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
-    return enableHover
-        ? createElement(GestureDetector, { gesture: gesture }, BaseComponent)
-        : BaseComponent;
+    if (enableHover) {
+        finalComponent = createElement(GestureDetector, { gesture: gesture }, finalComponent);
+    }
+    if (hasPositionFixed) {
+        finalComponent = createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -45,7 +45,7 @@ const _WebView = forwardRef((props, ref) => {
             button: 'Reload'
         }
     };
-    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
+    const currentErrorText = errorText[mpx.i18n?.locale || 'zh-CN'];
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
@@ -155,8 +155,8 @@ const _WebView = forwardRef((props, ref) => {
         switch (type) {
             case 'setTitle':
                 { // case下不允许直接声明，包个块解决该问题
-                    const title = postData._documentTitle;
-                    if (title) {
+                    const title = postData._documentTitle?.trim();
+                    if (title !== undefined) {
                         navigation && navigation.setOptions({ title });
                     }
                 }
@@ -252,6 +252,7 @@ const _WebView = forwardRef((props, ref) => {
     };
     const onLoadEnd = function (res) {
         if (__mpx_mode__ === 'android') {
+            res.persist();
             setTimeout(() => {
                 onLoadEndHandle(res);
             }, 0);
@@ -276,13 +277,13 @@ const _WebView = forwardRef((props, ref) => {
             setIsLoaded(false);
         }
     };
-    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+    return (<Portal>
         {pageLoadErr
             ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
               <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
               <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
             </View>)
-            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={isLoaded}></WebView>)}
+            : (<WebView style={defaultWebViewStyle} pointerEvents={isLoaded ? 'auto' : 'none'} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={true}></WebView>)}
       </Portal>);
 });
 _WebView.displayName = 'MpxWebview';

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
-import { error } from '@mpxjs/utils';
+import { error, hasOwn } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -14,20 +14,20 @@ const EasingKey = {
 const TransformInitial = {
     // 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
@@ -92,23 +92,23 @@ const parseTransform = (transformStr) => {
                 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]);
@@ -132,6 +132,13 @@ const formatStyle = (style) => {
         transform: parseTransform(style.transform)
     });
 };
+// transform 数组转对象
+function getTransformObj(transforms) {
+    'worklet';
+    return transforms.reduce((transformObj, item) => {
+        return Object.assign(transformObj, item);
+    }, {});
+}
 export default function useAnimationHooks(props) {
     const { style = {}, animation, enableAnimation } = props;
     const enableStyleAnimation = enableAnimation || !!animation;
@@ -150,7 +157,9 @@ export default function useAnimationHooks(props) {
     // 记录动画key的style样式值 没有的话设置为false
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedKeys = useRef({});
-    // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
+    // 记录上次style map
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const lastStyleRef = useRef({});
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -163,6 +172,12 @@ export default function useAnimationHooks(props) {
             return valMap;
         }, {});
     }, []);
+    // ** 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(() => {
@@ -175,16 +190,6 @@ export default function useAnimationHooks(props) {
         // 驱动动画
         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(() => {
@@ -194,7 +199,7 @@ export default function useAnimationHooks(props) {
             });
         };
     }, []);
-    // 根据 animation action 创建&驱动动画 key => wi
+    // 根据 animation action 创建&驱动动画
     function createAnimation(animatedKeys = []) {
         const actions = animation?.actions || [];
         const sequence = {};
@@ -251,6 +256,7 @@ export default function useAnimationHooks(props) {
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }
+    // 获取样式初始值（prop style or 默认值）
     function getInitialVal(key, isTransform = false) {
         if (isTransform && Array.isArray(originalStyle.transform)) {
             let initialVal = InitialValue[key];
@@ -263,31 +269,12 @@ export default function useAnimationHooks(props) {
         }
         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;
             });
@@ -295,7 +282,7 @@ export default function useAnimationHooks(props) {
         }, animatedKeys.current);
     }
     // animated key transform 格式化
-    function formatAnimatedKeys(keys = []) {
+    function formatAnimatedKeys(keys) {
         const animatedKeys = [];
         const transforms = [];
         keys.forEach(key => {
@@ -310,13 +297,24 @@ export default function useAnimationHooks(props) {
             animatedKeys.push(transforms);
         return animatedKeys;
     }
-    // transform 数组转对象
-    function getTransformObj() {
-        'worklet';
-        const transforms = originalStyle.transform || [];
-        return transforms.reduce((transformObj, item) => {
-            return Object.assign(transformObj, item);
-        }, {});
+    // 设置 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
@@ -325,7 +323,7 @@ export default function useAnimationHooks(props) {
         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/dist/utils.jsx

@@ -67,20 +67,6 @@ export const useUpdateEffect = (effect, deps) => {
         }
     }, deps);
 };
-/**
- * 解析行内样式
- * @param inlineStyle
- * @returns
- */
-export const parseInlineStyle = (inlineStyle = '') => {
-    return inlineStyle.split(';').reduce((styleObj, style) => {
-        const [k, v, ...rest] = style.split(':');
-        if (rest.length || !v || !k)
-            return styleObj;
-        const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return extendObject(styleObj, { [key]: global.__formatValue(v.trim()) });
-    }, {});
-};
 export const parseUrl = (cssUrl = '') => {
     if (!cssUrl)
         return;
@@ -253,12 +239,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     const normalStyleChangedRef = useRef(false);
     let hasVarDec = false;
     let hasVarUse = false;
-    let hasSelfPercent = false;
     const varKeyPaths = [];
     const unoVarKeyPaths = [];
-    const percentKeyPaths = [];
-    const calcKeyPaths = [];
-    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     const navigation = useNavigation();
@@ -318,6 +300,11 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         normalStyleChangedRef.current = !normalStyleChangedRef.current;
     }
     const memoResult = useMemo(() => {
+        let hasSelfPercent = false;
+        let hasPositionFixed = false;
+        const percentKeyPaths = [];
+        const calcKeyPaths = [];
+        const envKeyPaths = [];
         // transform can be memoized
         function envVisitor({ value, keyPath }) {
             if (envUseRegExp.test(value)) {
@@ -338,6 +325,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 percentKeyPaths.push(keyPath.slice());
             }
         }
+        function transformPosition(styleObj) {
+            if (styleObj.position === 'fixed') {
+                hasPositionFixed = true;
+                styleObj.position = 'absolute';
+            }
+        }
         // traverse env & calc & percent
         traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
         const percentConfig = {
@@ -369,11 +362,14 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
                 }
             }
         });
+        // apply position
+        transformPosition(normalStyle);
         // transform number enum stringify
         transformStringify(normalStyle);
         return {
             normalStyle,
-            hasSelfPercent
+            hasSelfPercent,
+            hasPositionFixed
         };
     }, [normalStyleChangedRef.current, width, height, parentWidth, parentHeight, parentFontSize]);
     return extendObject({
@@ -448,8 +444,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, y, width, height, offsetLeft, offsetTop) => {

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

@@ -411,7 +411,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
       onLayout: onSvgLoad,
       onError: binderror && onSvgError,
       style: extendObject(
-        { transformOrigin: 'top left' },
+        { transformOrigin: 'left top' },
         modeStyle
       )
     })
@@ -426,7 +426,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
         onError: binderror && onImageError,
         style: extendObject(
           {
-            transformOrigin: 'top left',
+            transformOrigin: 'left top',
             width: isCropMode ? imageWidth : '100%',
             height: isCropMode ? imageHeight : '100%'
           },