@mpxjs/webpack-plugin 2.9.64 → 2.9.66

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

@@ -7,6 +7,8 @@
 import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
 import useInnerProps from './getInnerListeners';
+import Animated from 'react-native-reanimated';
+import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
 import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils';
 import LinearGradient from 'react-native-linear-gradient';
@@ -39,6 +41,16 @@ const applyHandlers = (handlers, args) => {
         handler(...args);
     }
 };
+const normalizeStyle = (style = {}) => {
+    ['backgroundSize', 'backgroundPosition'].forEach(name => {
+        if (style[name] && typeof style[name] === 'string') {
+            if (style[name].trim()) {
+                style[name] = style[name].split(' ');
+            }
+        }
+    });
+    return style;
+};
 const isPercent = (val) => typeof val === 'string' && PERCENT_REGEX.test(val);
 const isBackgroundSizeKeyword = (val) => typeof val === 'string' && /^cover|contain$/.test(val);
 const isNeedLayout = (preImageInfo) => {
@@ -405,7 +417,7 @@ function normalizeBackgroundSize(backgroundSize, type) {
     return sizeList;
 }
 function preParseImage(imageStyle) {
-    const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = imageStyle || {};
+    const { backgroundImage = '', backgroundSize = ['auto'], backgroundPosition = [0, 0] } = normalizeStyle(imageStyle) || {};
     const { type, src, linearInfo } = parseBgImage(backgroundImage);
     return {
         src,
@@ -487,8 +499,8 @@ function wrapImage(imageStyle) {
                 };
                 setImageSizeWidth(sizeInfo.current.width);
                 setImageSizeHeight(sizeInfo.current.height);
-                setShow(true);
             }
+            setShow(true);
         }
         else if (sizeInfo.current) {
             setLayoutInfoWidth(width);
@@ -498,7 +510,7 @@ function wrapImage(imageStyle) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', overflow: 'hidden' }}>
+    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
     {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
   </View>;
@@ -517,7 +529,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = {
@@ -547,7 +559,8 @@ const _View = forwardRef((viewProps, ref) => {
     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(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle
     });
     const dataRef = useRef({});
@@ -581,9 +594,10 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
+        style: viewStyle,
         ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
@@ -597,15 +611,31 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      {wrapWithChildren(props, {
-            hasVarDec,
-            enableBackground: enableBackgroundRef.current,
-            textStyle,
-            backgroundStyle,
-            varContext: varContextRef.current,
-            textProps
-        })}
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimation
+        ? useAnimationHooks({
+            animation,
+            style: viewStyle
+        })
+        : viewStyle;
+    const childNode = wrapWithChildren(props, {
+        hasVarDec,
+        enableBackground: enableBackgroundRef.current,
+        textStyle,
+        backgroundStyle,
+        varContext: varContextRef.current,
+        textProps
+    });
+    return animation?.actions?.length
+        ? (<Animated.View {...innerProps} style={finalStyle}>
+      {childNode}
+    </Animated.View>)
+        : (<View {...innerProps}>
+      {childNode}
     </View>);
 });
 _View.displayName = 'mpx-view';

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

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { noop, warn } from '@mpxjs/utils';
 import { Portal } from '@ant-design/react-native';
 import { getCustomEvent } from './getInnerListeners';
@@ -6,7 +6,7 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 const _WebView = forwardRef((props, ref) => {
-    const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
@@ -17,7 +17,8 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const { nodeRef: webViewRef } = useNodesRef(props, ref, {
+    const webViewRef = useRef(null);
+    useNodesRef(props, ref, webViewRef, {
         defaultStyle: defaultWebViewStyle
     });
     const _messageList = [];

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

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
+// 微信 timingFunction 和 RN Easing 对应关系
+const EasingKey = {
+    linear: Easing.linear,
+    ease: Easing.ease,
+    'ease-in': Easing.in(Easing.ease),
+    'ease-in-out': Easing.inOut(Easing.ease),
+    'ease-out': Easing.out(Easing.ease)
+    // 'step-start': '',
+    // 'step-end': ''
+};
+const TransformInitial = {
+    // matrix: 0,
+    // matrix3d: 0,
+    rotate: '0deg',
+    rotateX: '0deg',
+    rotateY: '0deg',
+    rotateZ: '0deg',
+    // rotate3d:[0,0,0]
+    scale: 1,
+    // scale3d: [1, 1, 1],
+    scaleX: 1,
+    scaleY: 1,
+    // scaleZ: 1,
+    skew: 0,
+    skewX: '0deg',
+    skewY: '0deg',
+    translate: 0,
+    // translate3d: 0,
+    translateX: 0,
+    translateY: 0
+    // translateZ: 0,
+};
+// 动画默认初始值
+const InitialValue = Object.assign({
+    opacity: 1,
+    backgroundColor: 'transparent',
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: ['50%', '50%', 0]
+}, TransformInitial);
+const TransformOrigin = 'transformOrigin';
+// deg 角度
+// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
+// 背景色
+// const isBg = (key: RuleKey) => key === 'backgroundColor'
+// transform
+const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+export default function useAnimationHooks(props) {
+    const { style: originalStyle = {}, animation } = props;
+    // id 标识
+    const id = animation?.id || -1;
+    // 有动画样式的 style key
+    const animatedStyleKeys = useSharedValue([]);
+    const animatedKeys = useRef({});
+    // ** 全量 style prop sharedValue
+    // 不能做增量的原因：
+    // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
+    // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+    const shareValMap = useMemo(() => {
+        return Object.keys(InitialValue).reduce((valMap, key) => {
+            const defaultVal = getInitialVal(key, isTransform(key));
+            valMap[key] = makeMutable(defaultVal);
+            return valMap;
+        }, {});
+    }, []);
+    // ** 获取动画样式prop & 驱动动画
+    useEffect(() => {
+        if (id === -1)
+            return;
+        // 更新动画样式 key map
+        animatedKeys.current = getAnimatedStyleKeys();
+        const keys = Object.keys(animatedKeys.current);
+        animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys]);
+        // 驱动动画
+        createAnimation(keys);
+    }, [id]);
+    // ** 清空动画
+    useEffect(() => {
+        return () => {
+            Object.values(shareValMap).forEach((value) => {
+                cancelAnimation(value);
+            });
+        };
+    }, []);
+    // 根据 animation action 创建&驱动动画 key => wi
+    function createAnimation(animatedKeys = []) {
+        const actions = animation?.actions || [];
+        const sequence = {};
+        const lastValueMap = {};
+        actions.forEach(({ animatedOption, rules, transform }, index) => {
+            const { delay, duration, timingFunction, transformOrigin } = animatedOption;
+            const easing = EasingKey[timingFunction] || Easing.inOut(Easing.quad);
+            let needSetCallback = true;
+            const setTransformOrigin = (finished) => {
+                'worklet';
+                // 动画结束后设置下一次transformOrigin
+                if (finished) {
+                    if (index < actions.length - 1) {
+                        const transformOrigin = actions[index + 1].animatedOption?.transformOrigin;
+                        transformOrigin && (shareValMap[TransformOrigin].value = transformOrigin);
+                    }
+                }
+            };
+            if (index === 0) {
+                // 设置当次中心
+                shareValMap[TransformOrigin].value = transformOrigin;
+            }
+            // 添加每个key的多次step动画
+            animatedKeys.forEach(key => {
+                let toVal = (rules.get(key) || transform.get(key));
+                // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
+                if (!toVal) {
+                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
+                needSetCallback = false;
+                if (!sequence[key]) {
+                    sequence[key] = [animation];
+                }
+                else {
+                    sequence[key].push(animation);
+                }
+                // 更新一下 lastValueMap
+                lastValueMap[key] = toVal;
+            });
+            // 赋值驱动动画
+            animatedKeys.forEach((key) => {
+                const animations = sequence[key];
+                shareValMap[key].value = withSequence(...animations);
+            });
+        });
+    }
+    // 创建单个animation
+    function getAnimation({ key, value }, { delay, duration, easing }, callback) {
+        const animation = typeof callback === 'function'
+            ? withTiming(value, { duration, easing }, callback)
+            : withTiming(value, { duration, easing });
+        return delay ? withDelay(delay, animation) : animation;
+    }
+    // 获取初始值（prop style or 默认值）
+    function getInitialVal(key, isTransform = false) {
+        if (isTransform && originalStyle.transform?.length) {
+            let initialVal = 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];
+    }
+    // 循环 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 => {
+                if (!keyMap[key])
+                    keyMap[key] = true;
+            });
+            return keyMap;
+        }, animatedKeys.current);
+    }
+    // animated key transform 格式化
+    function formatAnimatedKeys(keys = []) {
+        const animatedKeys = [];
+        const transforms = [];
+        keys.forEach(key => {
+            if (isTransform(key)) {
+                transforms.push(key);
+            }
+            else {
+                animatedKeys.push(key);
+            }
+        });
+        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);
+        }, {});
+    }
+    // ** 生成动画样式
+    return useAnimatedStyle(() => {
+        // console.info(`useAnimatedStyle styles=`, originalStyle)
+        return animatedStyleKeys.value.reduce((styles, key) => {
+            // console.info('getAnimationStyles', key, shareValMap[key].value)
+            if (Array.isArray(key)) {
+                const transformStyle = getTransformObj();
+                key.forEach((transformKey) => {
+                    transformStyle[transformKey] = shareValMap[transformKey].value;
+                });
+                styles.transform = Object.entries(transformStyle).map(([key, value]) => {
+                    return { [key]: value };
+                });
+            }
+            else {
+                styles[key] = shareValMap[key].value;
+            }
+            return styles;
+        }, Object.assign({}, originalStyle));
+    });
+}

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

@@ -1,6 +1,5 @@
 import { useRef, useImperativeHandle } from 'react';
-export default function useNodesRef(props, ref, instance = {}) {
-    const nodeRef = useRef(null);
+export default function useNodesRef(props, ref, nodeRef, instance = {}) {
     const _props = useRef(null);
     _props.current = props;
     useImperativeHandle(ref, () => {
@@ -14,7 +13,4 @@ export default function useNodesRef(props, ref, instance = {}) {
             }
         };
     });
-    return {
-        nodeRef
-    };
 }

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
-import { isObject, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
+import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
 import { VarContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
@@ -12,18 +12,24 @@ export const DEFAULT_FONT_SIZE = 16;
 export const DEFAULT_UNLAY_STYLE = {
     opacity: 0
 };
-export function rpx(value) {
-    const { width } = Dimensions.get('screen');
-    // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
-    // px = rpx * (750 / 屏幕宽度)
-    return value * width / 750;
-}
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/;
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/;
-const hairlineRegExp = /^\s*hairlineWidth\s*$/;
 const varDecRegExp = /^--.*/;
 const varUseRegExp = /var\(/;
 const calcUseRegExp = /calc\(/;
+const envUseRegExp = /env\(/;
+const safeAreaInsetMap = {
+    'safe-area-inset-top': 'top',
+    'safe-area-inset-right': 'right',
+    'safe-area-inset-bottom': 'bottom',
+    'safe-area-inset-left': 'left'
+};
+function getSafeAreaInset(name) {
+    const navigation = getFocusedNavigation();
+    const insets = {
+        ...initialWindowMetrics?.insets,
+        ...navigation?.insets
+    };
+    return insets[safeAreaInsetMap[name]];
+}
 export function omit(obj, fields) {
     const shallowCopy = Object.assign({}, obj);
     for (let i = 0; i < fields.length; i += 1) {
@@ -81,7 +87,8 @@ export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKe
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
-        return displayName === 'mpx-text' || displayName === 'Text';
+        const isCustomText = ele.type?.isCustomText;
+        return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -131,20 +138,6 @@ const parentHeightPercentRule = {
     top: true,
     bottom: true
 };
-// todo calc时处理角度和时间等单位
-function formatValue(value) {
-    let matched;
-    if ((matched = pxRegExp.exec(value))) {
-        return +matched[1];
-    }
-    else if ((matched = rpxRegExp.exec(value))) {
-        return rpx(+matched[1]);
-    }
-    else if (hairlineRegExp.test(value)) {
-        return StyleSheet.hairlineWidth;
-    }
-    return value;
-}
 function resolvePercent(value, key, percentConfig) {
     if (!(typeof value === 'string' && PERCENT_REGEX.test(value)))
         return value;
@@ -196,11 +189,11 @@ function resolveVar(input, varContext) {
             varValue = '' + resolveVar(varValue, varContext);
         }
         else {
-            varValue = '' + formatValue(varValue);
+            varValue = '' + global.__formatValue(varValue);
         }
         replaced.replace(start, end - 1, varValue);
     });
-    return formatValue(replaced.source());
+    return global.__formatValue(replaced.source());
 }
 function transformVar(styleObj, varKeyPaths, varContext) {
     varKeyPaths.forEach((varKeyPath) => {
@@ -209,6 +202,21 @@ function transformVar(styleObj, varKeyPaths, varContext) {
         });
     });
 }
+function transformEnv(styleObj, envKeyPaths) {
+    envKeyPaths.forEach((envKeyPath) => {
+        setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
+            const parsed = parseFunc(value, 'env');
+            const replaced = new ReplaceSource(value);
+            parsed.forEach(({ start, end, args }) => {
+                const name = args[0];
+                const fallback = args[1] || '';
+                const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback));
+                replaced.replace(start, end - 1, value);
+            });
+            target[key] = global.__formatValue(replaced.source());
+        });
+    });
+}
 function transformCalc(styleObj, calcKeyPaths, formatter) {
     calcKeyPaths.forEach((calcKeyPath) => {
         setStyle(styleObj, calcKeyPath, ({ target, key, value }) => {
@@ -226,7 +234,7 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
                     error(`calc(${exp}) parse error.`, undefined, e);
                 }
             });
-            target[key] = formatValue(replaced.source());
+            target[key] = global.__formatValue(replaced.source());
         });
     });
 }
@@ -239,6 +247,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
     const varKeyPaths = [];
     const percentKeyPaths = [];
     const calcKeyPaths = [];
+    const envKeyPaths = [];
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
     function varVisitor({ key, value, keyPath }) {
@@ -277,6 +286,11 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         }
         transformVar(normalStyle, varKeyPaths, varContextRef.current);
     }
+    function envVisitor({ value, keyPath }) {
+        if (envUseRegExp.test(value)) {
+            envKeyPaths.push(keyPath.slice());
+        }
+    }
     function calcVisitor({ value, keyPath }) {
         if (calcUseRegExp.test(value)) {
             calcKeyPaths.push(keyPath.slice());
@@ -287,12 +301,12 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             hasSelfPercent = true;
             percentKeyPaths.push(keyPath.slice());
         }
-        else if (key === 'fontSize' || key === 'lineHeight') {
+        else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
             percentKeyPaths.push(keyPath.slice());
         }
     }
-    // traverse calc & percent
-    traverseStyle(normalStyle, [percentVisitor, calcVisitor]);
+    // traverse env & calc & percent
+    traverseStyle(normalStyle, [envVisitor, percentVisitor, calcVisitor]);
     const percentConfig = {
         width,
         height,
@@ -301,6 +315,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         parentHeight,
         parentFontSize
     };
+    // apply env
+    transformEnv(normalStyle, envKeyPaths);
     // apply percent
     transformPercent(normalStyle, percentKeyPaths, percentConfig);
     // apply calc
@@ -310,7 +326,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             return typeof resolved === 'number' ? resolved : 0;
         }
         else {
-            const formatted = formatValue(value);
+            const formatted = global.__formatValue(value);
             if (typeof formatted === 'number') {
                 return formatted;
             }
@@ -358,12 +374,9 @@ export function traverseStyle(styleObj, visitors) {
     }
     traverse(styleObj);
 }
-export function setStyle(styleObj, keyPath, setter, needClone = false) {
+export function setStyle(styleObj, keyPath, setter) {
     let target = styleObj;
-    const firstKey = keyPath[0];
     const lastKey = keyPath[keyPath.length - 1];
-    if (needClone)
-        target[firstKey] = diffAndCloneA(target[firstKey]).clone;
     for (let i = 0; i < keyPath.length - 1; i++) {
         target = target[keyPath[i]];
         if (!target)

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

@@ -297,7 +297,9 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     setHeight
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+  const nodeRef = useRef(null)
+
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 

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

@@ -65,7 +65,9 @@ const CheckboxGroup = forwardRef<
     setHeight
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+  const nodeRef = useRef(null)
+
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 

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

@@ -7,6 +7,7 @@
 import {
   JSX,
   useState,
+  useRef,
   forwardRef,
   useEffect,
   ReactNode,
@@ -141,7 +142,9 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       setHeight
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null)
+
+    useNodesRef(props, ref, nodeRef, {
       defaultStyle,
       change: onChange
     })

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

@@ -51,7 +51,8 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
   const { textStyle, innerStyle } = splitStyle(normalStyle)
 
-  const { nodeRef: formRef } = useNodesRef(props, ref)
+  const formRef = useRef(null)
+  useNodesRef(props, ref, formRef)
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })
 

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

@@ -3,7 +3,7 @@
  * ✔ size
  * ✔ color
  */
-import { JSX, forwardRef } from 'react'
+import { JSX, forwardRef, useRef } from 'react'
 import { Text, TextStyle, Image } from 'react-native'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -75,7 +75,8 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       setHeight
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, { defaultStyle })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 

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

@@ -135,7 +135,8 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     overflow: 'hidden'
   }
 
-  const { nodeRef } = useNodesRef(props, ref, {
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {
     defaultStyle
   })
 

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

@@ -192,7 +192,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setHeight
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef } = useNodesRef(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef)
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 

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

@@ -54,7 +54,8 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       setHeight
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, { defaultStyle })
 
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })