@mpxjs/webpack-plugin 2.9.64 → 2.9.65

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

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { useState, forwardRef, useEffect, useContext } from 'react';
+import { useRef, useState, forwardRef, useEffect, useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { LabelContext, RadioGroupContext } from './context';
@@ -92,7 +92,8 @@ const Radio = forwardRef((radioProps, ref) => {
     if (backgroundStyle) {
         warn('Radio does not support background image-related styles!');
     }
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle,
         change: onChange
     });

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

@@ -34,6 +34,7 @@
 import { ScrollView } from 'react-native-gesture-handler';
 import { RefreshControl } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -57,7 +58,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const initialTimeout = useRef(null);
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
-    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+    const scrollViewRef = useAnimatedRef();
+    useNodesRef(props, ref, scrollViewRef, {
         scrollOffset: scrollOptions,
         node: {
             scrollEnabled: scrollX || scrollY,

package/lib/runtime/components/react/dist/mpx-swiper/carouse.jsx

@@ -69,7 +69,8 @@ const _Carouse = forwardRef((props, ref) => {
     const defaultY = (defaultHeight * initOffsetIndex) || 0;
     // 内部存储上一次的offset值
     const autoplayTimerRef = useRef(null);
-    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {});
+    const scrollViewRef = useRef(null);
+    useNodesRef(props, ref, scrollViewRef, {});
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onWrapperLayout });

package/lib/runtime/components/react/dist/mpx-swiper/index.jsx

@@ -43,7 +43,8 @@ const _SwiperWrapper = forwardRef((props, ref) => {
         bindchange: props.bindchange,
         easingFunction: props['easing-function'] || 'default'
     };
-    const { nodeRef } = useNodesRef(props, ref, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -1,12 +1,13 @@
 import { View } from 'react-native';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
 const _SwiperItem = forwardRef((props, ref) => {
     const { 'enable-offset': enableOffset, 'enable-var': enableVar, 'external-var-context': externalVarContext, style } = props;
     const { textProps } = splitProps(props);
-    const { nodeRef } = useNodesRef(props, ref, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const { 

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

@@ -5,7 +5,7 @@
  * ✔ color
  */
 import { Switch } from 'react-native';
-import { useEffect, forwardRef, useState, useContext } from 'react';
+import { useRef, useEffect, forwardRef, useState, useContext } from 'react';
 import { warn } from '@mpxjs/utils';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
@@ -31,7 +31,8 @@ const _Switch = forwardRef((props, ref) => {
     useEffect(() => {
         setIsChecked(checked);
     }, [checked]);
-    const { nodeRef } = useNodesRef(props, ref);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const onChange = (evt, { checked } = {}) => {
         if (type === 'switch') {

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

@@ -18,7 +18,8 @@ const _Text = forwardRef((props, ref) => {
         parentWidth,
         parentHeight
     });
-    const { nodeRef } = useNodesRef(props, ref);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: normalStyle,

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

@@ -39,6 +39,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 +415,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 +497,8 @@ function wrapImage(imageStyle) {
                 };
                 setImageSizeWidth(sizeInfo.current.width);
                 setImageSizeHeight(sizeInfo.current.height);
-                setShow(true);
             }
+            setShow(true);
         }
         else if (sizeInfo.current) {
             setLayoutInfoWidth(width);
@@ -498,7 +508,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>;
@@ -547,7 +557,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({});

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';
@@ -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/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) {
@@ -131,20 +137,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 +188,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 +201,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 +233,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 +246,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 +285,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 +300,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 +314,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
         parentHeight,
         parentFontSize
     };
+    // apply env
+    transformEnv(normalStyle, envKeyPaths);
     // apply percent
     transformPercent(normalStyle, percentKeyPaths, percentConfig);
     // apply calc
@@ -310,7 +325,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 +373,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 })
 

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -3,7 +3,7 @@
  */
 
 import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, forwardRef, ReactNode } from 'react'
+import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
@@ -41,7 +41,8 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef: movableViewRef } = useNodesRef(props, ref)
+  const movableViewRef = useRef(null)
+  useNodesRef(props, ref, movableViewRef)
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width = 10, height = 10 } = e.nativeEvent.layout

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

@@ -84,7 +84,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     y: Number(y)
   })
 
-  const { nodeRef } = useNodesRef(props, ref, {
+  const nodeRef = useRef<View>(null)
+  useNodesRef(props, ref, nodeRef, {
     defaultStyle: styles.container
   })
 

package/lib/runtime/components/react/mpx-picker/date.tsx

@@ -31,7 +31,8 @@ const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: D
   const [datevalue, setDateValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, DateProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, DateProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

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

@@ -34,7 +34,8 @@ import { FormContext, FormFieldValue } from '../context'
 const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
   const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props
   const innerLayout = useRef({})
-  const { nodeRef } = useNodesRef<View, PickerProps>(props, ref, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, PickerProps>(props, ref, nodeRef, {
   })
   const innerProps = useInnerProps(props, {
     ref: nodeRef

package/lib/runtime/components/react/mpx-picker/multiSelector.tsx

@@ -89,7 +89,8 @@ const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, Mu
   const [data, setData] = useState(formatRange || [])
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, MultiSelectorProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, MultiSelectorProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

package/lib/runtime/components/react/mpx-picker/region.tsx

@@ -44,7 +44,8 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   const [regionvalue, setRegionValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, RegionProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, RegionProps>(props, ref, viewRef, {
   })
 
   const onChange = (value: string[]): void => {

package/lib/runtime/components/react/mpx-picker/selector.tsx

@@ -31,7 +31,8 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
   const [data, setData] = useState(formatRange || [])
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, SelectorProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, SelectorProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

package/lib/runtime/components/react/mpx-picker/time.tsx

@@ -134,10 +134,12 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
   const [timevalue, setTimeValue] = useState(defaultValue)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, TimeProps>(props, ref, viewRef, {})
   // 存储modal的布局信息
   const modalLayoutRef = useRef({})
-  const { nodeRef: modalRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  const modalRef = useRef<View>(null)
+  useNodesRef<View, TimeProps>(props, ref, modalRef, {})
   const [visible, setVisible] = useState(false)
   const columnData = generateColumns()
   const [data, setData] = useState(columnData)

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

@@ -1,6 +1,6 @@
 
 import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
-import React, { forwardRef, useState, useEffect, ReactElement, ReactNode } from 'react'
+import React, { forwardRef, useRef, useState, useEffect, ReactElement, ReactNode } from 'react'
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 interface ColumnProps {
@@ -38,7 +38,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const { textProps } = splitProps(props)
   // const { innerStyle } = splitStyle(normalStyle)
   // scrollView的ref
-  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {})
+  const scrollViewRef = useRef<ScrollView>(null)
+  useNodesRef(props, ref, scrollViewRef, {})
   // 每个元素的高度
   let [itemH, setItemH] = useState(0)
 

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

@@ -66,7 +66,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
   const { height: indicatorH, width: indicatorW } = indicatorStyle
-  const { nodeRef } = useNodesRef<View, PickerViewProps>(props, ref, {})
+  const nodeRef = useRef(null)
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
   //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
   const {
     normalStyle,

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

@@ -65,7 +65,8 @@ const radioGroup = 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-radio.tsx

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { JSX, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
 import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
@@ -141,7 +141,8 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       warn('Radio does not support background image-related styles!')
     }
 
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, {
       defaultStyle,
       change: onChange
     })