@mpxjs/webpack-plugin 2.9.62 → 2.9.65

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

@@ -3,10 +3,11 @@
  * ✔ size
  * ✔ color
  */
-import { useRef, forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Image } from 'react-native';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef';
+import { useLayout, useTransformStyle } from './utils';
 const IconTypeMap = new Map([
     ['success', 'data:image/png;base64,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'],
     ['success_no_circle', 'data:image/png;base64,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'],
@@ -19,30 +20,27 @@ const IconTypeMap = new Map([
     ['clear', 'data:image/png;base64,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']
 ]);
 const Icon = forwardRef((props, ref) => {
-    const { type, size = 23, color, style = {}, 'enable-offset': enableOffset } = props;
+    const { type, size = 23, color, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const uri = IconTypeMap.get(type);
     const defaultStyle = { width: ~~size, height: ~~size };
-    const layoutRef = useRef({});
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
+    const styleObj = {
+        ...defaultStyle,
+        ...style
     };
+    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: {
-            ...defaultStyle,
-            tintColor: color,
-            ...style
+            ...normalStyle,
+            ...layoutStyle,
+            tintColor: color
         },
         source: { uri },
-        ...(enableOffset ? { onLayout } : {})
-    }, [
-        'enable-offset'
-    ], {
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     return <Image {...innerProps}/>;

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

@@ -11,9 +11,10 @@
  * ✔ DEFAULT_SIZE
  */
 import { useEffect, useMemo, useState, useRef, forwardRef } from 'react';
-import { Image as RNImage, View, StyleSheet, } from 'react-native';
+import { Image as RNImage, View, StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from '../getInnerListeners';
 import useNodesRef from '../useNodesRef';
+import { useLayout, useTransformStyle } from '../utils';
 const DEFAULT_IMAGE_WIDTH = 320;
 const DEFAULT_IMAGE_HEIGHT = 240;
 // const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
@@ -35,7 +36,7 @@ const cropMode = [
     'top left',
     'top right',
     'bottom left',
-    'bottom right',
+    'bottom right'
 ];
 const ModeMap = new Map([
     ['scaleToFill', 'stretch'],
@@ -43,7 +44,7 @@ const ModeMap = new Map([
     ['aspectFill', 'cover'],
     ['widthFix', 'stretch'],
     ['heightFix', 'stretch'],
-    ...cropMode.map(mode => [mode, 'stretch']),
+    ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
 const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
@@ -56,15 +57,27 @@ const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', 
     // svg = false,
-    style = {}, 'enable-offset': enableOffset, bindload, binderror } = props;
-    const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = style;
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle: {
-            width: DEFAULT_IMAGE_WIDTH,
-            height: DEFAULT_IMAGE_HEIGHT
-        }
+    style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
+    const defaultStyle = {
+        width: DEFAULT_IMAGE_WIDTH,
+        height: DEFAULT_IMAGE_HEIGHT
+    };
+    const styleObj = {
+        ...defaultStyle,
+        ...style,
+        overflow: 'hidden'
+    };
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        defaultStyle
     });
-    const layoutRef = useRef({});
+    const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
+        setViewWidth(width);
+        setViewHeight(height);
+    };
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout });
+    const { width, height } = normalStyle;
     const preSrc = useRef();
     const resizeMode = ModeMap.get(mode) || 'stretch';
     const isWidthFixMode = mode === 'widthFix';
@@ -138,15 +151,6 @@ const Image = forwardRef((props, ref) => {
                 layoutRef
             }, props));
     };
-    const onViewLayout = ({ nativeEvent: { layout: { width, height }, }, }) => {
-        setViewWidth(width);
-        setViewHeight(height);
-    };
-    const onImageLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     useEffect(() => {
         if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
             setLoaded(true);
@@ -181,10 +185,14 @@ const Image = forwardRef((props, ref) => {
     }, [isWidthFixMode, isHeightFixMode, isCropMode, src]);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...(enableOffset ? { onLayout: onImageLayout } : {})
-    }, [
-        'enable-offset'
-    ], {
+        style: {
+            ...normalStyle,
+            ...layoutStyle,
+            ...(isHeightFixMode && { width: fixedWidth }),
+            ...(isWidthFixMode && { height: fixedHeight })
+        },
+        ...layoutProps
+    }, [], {
         layoutRef
     });
     // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
@@ -205,17 +213,11 @@ const Image = forwardRef((props, ref) => {
     //     </Suspense>
     //   )
     // }
-    return (<View style={{
-            width, height,
-            ...style,
-            ...(isHeightFixMode && { width: fixedWidth }),
-            ...(isWidthFixMode && { height: fixedHeight }),
-            overflow: 'hidden',
-        }} onLayout={onViewLayout}>
-      {loaded && <RNImage {...innerProps} source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={{
+    return (<View {...innerProps}>
+      {loaded && <RNImage source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={{
                 ...StyleSheet.absoluteFillObject,
-                width: !isCropMode ? '100%' : imageWidth,
-                height: !isCropMode ? '100%' : imageHeight,
+                width: isCropMode ? imageWidth : '100%',
+                height: isCropMode ? imageHeight : '100%',
                 ...(isCropMode && cropModeStyle)
             }}/>}
     </View>);

package/lib/runtime/components/react/dist/mpx-image/svg.jsx

@@ -1,5 +1,7 @@
 import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css';
 const Svg = ({ local = false, src, style, width, height }) => {
-    return local ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>) : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
+    return local
+        ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>)
+        : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
 };
 export default Svg;

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

@@ -39,7 +39,8 @@
  */
 import { forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react';
 import { Platform, TextInput } from 'react-native';
-import { parseInlineStyle, useUpdateEffect, throwReactWarning } from './utils';
+import { warn } from '@mpxjs/utils';
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext } from './context';
@@ -49,29 +50,38 @@ const keyboardTypeMap = {
     idcard: 'default',
     digit: Platform.select({
         ios: 'decimal-pad',
-        android: 'numeric',
-    }) || '',
+        android: 'numeric'
+    }) || ''
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-offset': enableOffset, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
-    multiline, 'auto-height': autoHeight, bindlinechange, } = props;
+    multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
     }
-    const { nodeRef } = useNodesRef(props, ref);
     const keyboardType = keyboardTypeMap[type];
     const defaultValue = type === 'number' && value ? value + '' : value;
     const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
-    const layoutRef = useRef({});
     const tmpValue = useRef();
     const cursorIndex = useRef(0);
     const lineCount = useRef(0);
     const [inputValue, setInputValue] = useState(defaultValue);
     const [contentHeight, setContentHeight] = useState(0);
+    const styleObj = {
+        padding: 0,
+        ...style,
+        ...multiline && autoHeight && {
+            height: Math.max(style?.minHeight || 35, contentHeight)
+        }
+    };
+    const { hasSelfPercent, normalStyle, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
             setInputValue(value);
@@ -88,7 +98,7 @@ const Input = forwardRef((props, ref) => {
     const onTextInput = ({ nativeEvent }) => {
         if (!bindinput && !bindblur)
             return;
-        const { range: { start, end }, text, } = nativeEvent;
+        const { range: { start, end }, text } = nativeEvent;
         cursorIndex.current = start < end ? start : start + text.length;
     };
     const onChange = (evt) => {
@@ -98,7 +108,7 @@ const Input = forwardRef((props, ref) => {
         const result = bindinput(getCustomEvent('input', evt, {
             detail: {
                 value: evt.nativeEvent.text,
-                cursor: cursorIndex.current,
+                cursor: cursorIndex.current
             },
             layoutRef
         }, props));
@@ -114,7 +124,7 @@ const Input = forwardRef((props, ref) => {
         bindfocus &&
             bindfocus(getCustomEvent('focus', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -124,7 +134,7 @@ const Input = forwardRef((props, ref) => {
             bindblur(getCustomEvent('blur', evt, {
                 detail: {
                     value: tmpValue.current || '',
-                    cursor: cursorIndex.current,
+                    cursor: cursorIndex.current
                 },
                 layoutRef
             }, props));
@@ -134,7 +144,7 @@ const Input = forwardRef((props, ref) => {
             evt.nativeEvent.key === 'Enter' &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -144,7 +154,7 @@ const Input = forwardRef((props, ref) => {
             multiline &&
             bindconfirm(getCustomEvent('confirm', evt, {
                 detail: {
-                    value: tmpValue.current || '',
+                    value: tmpValue.current || ''
                 },
                 layoutRef
             }, props));
@@ -161,7 +171,7 @@ const Input = forwardRef((props, ref) => {
                     detail: {
                         height,
                         lineHeight,
-                        lineCount: lineCount.current,
+                        lineCount: lineCount.current
                     },
                     layoutRef
                 }, props));
@@ -173,16 +183,11 @@ const Input = forwardRef((props, ref) => {
             bindselectionchange(getCustomEvent('selectionchange', evt, {
                 detail: {
                     selectionStart: evt.nativeEvent.selection.start,
-                    selectionEnd: evt.nativeEvent.selection.end,
+                    selectionEnd: evt.nativeEvent.selection.end
                 },
                 layoutRef
             }, props));
     };
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     const resetValue = () => {
         setInputValue('');
     };
@@ -191,7 +196,7 @@ const Input = forwardRef((props, ref) => {
     };
     if (formValuesMap) {
         if (!props.name) {
-            throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.');
+            warn('If a form component is used, the name attribute is required.');
         }
         else {
             formValuesMap.set(props.name, { getValue, resetValue });
@@ -205,21 +210,21 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
+    const composeStyle = { ...normalStyle, ...layoutStyle };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        ...(enableOffset ? { onLayout } : {}),
-    }, [
-        'enable-offset'
-    ], {
-        layoutRef
-    });
-    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange} style={{
+        style: {
             padding: 0,
-            ...style,
+            ...composeStyle,
             ...multiline && autoHeight && {
-                height: Math.max(style?.minHeight || 35, contentHeight)
+                height: Math.max(composeStyle?.minHeight || 35, contentHeight)
             }
-        }}/>);
+        },
+        ...layoutProps
+    }, [], {
+        layoutRef
+    });
+    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange}/>);
 });
 Input.displayName = 'mpx-input';
 export default Input;

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

@@ -2,60 +2,53 @@
  * ✘ for
  */
 import { useRef, forwardRef } from 'react';
-import { View, Text, } from 'react-native';
+import { View } from 'react-native';
+import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { every, splitStyle, splitProps, isText, throwReactWarning } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
 import { LabelContext } from './context';
-const Label = forwardRef((props, ref) => {
-    const { style = {}, 'enable-offset': enableOffset, children, bindtap } = props;
-    const { textStyle, imageStyle, innerStyle } = splitStyle(style);
-    if (imageStyle) {
-        throwReactWarning('[Mpx runtime warn]: Label does not support background image-related styles!');
-    }
+const Label = forwardRef((labelProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(labelProps);
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindtap } = props;
     const defaultStyle = {
-        flexDirection: 'row',
+        flexDirection: 'row'
+    };
+    const styleObj = {
+        ...defaultStyle,
+        ...style
     };
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    if (backgroundStyle) {
+        warn('Label does not support background image-related styles!');
+    }
     const contextRef = useRef({
-        triggerChange: () => { }
+        triggerChange: noop
     });
-    const layoutRef = useRef({});
-    const { nodeRef } = useNodesRef(props, ref, {
-        defaultStyle
-    });
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
-    };
     const onTap = (evt) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props));
         contextRef.current.triggerChange?.(evt);
     };
-    const wrapChildren = (children, textStyle) => {
-        const { textProps } = splitProps(props);
-        if (every(children, (child) => isText(child))) {
-            if (textStyle || textProps) {
-                children = <Text key='labelTextWrap' style={textStyle || {}} {...(textProps || {})}>{children}</Text>;
-            }
-        }
-        else {
-            if (textStyle)
-                throwReactWarning('[Mpx runtime warn]: Text style will be ignored unless every child of the Label is Text node!');
-        }
-        return children;
-    };
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: { ...defaultStyle, ...innerStyle },
-        bindtap: onTap,
-        ...(enableOffset ? { onLayout } : {})
-    }, ['enable-offset'], {
+        style: { ...innerStyle, ...layoutStyle },
+        ...layoutProps,
+        bindtap: onTap
+    }, [], {
         layoutRef
     });
     return <View {...innerProps}>
       <LabelContext.Provider value={contextRef}>
-        {wrapChildren(children, textStyle)}
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
       </LabelContext.Provider>
     </View>;
 });

package/lib/runtime/components/react/dist/mpx-movable-area.jsx

@@ -2,43 +2,39 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { useState, useEffect, useRef, forwardRef } from 'react';
+import { useState, useEffect, forwardRef, useRef } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
+import { useTransformStyle, wrapChildren, useLayout } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
-    const { children, style = {}, width = 10, height = 10 } = props;
+    const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const [areaWidth, setAreaWidth] = useState(0);
     const [areaHeight, setAreaHeight] = useState(0);
-    const layoutRef = useRef({});
     useEffect(() => {
         setAreaWidth(width);
         setAreaHeight(height);
     }, [width, height]);
-    const { nodeRef: movableViewRef } = useNodesRef(props, ref);
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const movableViewRef = useRef(null);
+    useNodesRef(props, ref, movableViewRef);
     const onLayout = (e) => {
         const { width = 10, height = 10 } = e.nativeEvent.layout;
         setAreaWidth(width);
         setAreaHeight(height);
-        movableViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
-        });
     };
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout });
     const innerProps = useInnerProps(props, {
+        style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
         ref: movableViewRef,
-        onLayout
-    }, [
-        'children',
-        'style',
-    ], { layoutRef });
+        ...layoutProps
+    }, [], { layoutRef });
     return (<MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
-      <View {...innerProps} style={{
-            height: areaHeight,
-            width: areaWidth,
-            overflow: 'hidden',
-            ...style
-        }}>
-        {children}
+      <View {...innerProps}>
+      {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        })}
       </View>
     </MovableAreaContext.Provider>);
 });

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

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         left: 0,
         top: 0
-    },
+    }
 });
 const _MovableView = forwardRef((props, ref) => {
     const { children, friction = 7, scale = false, direction = 'none', x = 0, y = 0, style = {}, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': originScaleValue = 1, bindscale, bindchange } = props;
@@ -41,13 +41,14 @@ const _MovableView = forwardRef((props, ref) => {
         x: Number(x),
         y: Number(y)
     });
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
         defaultStyle: styles.container
     });
     let panResponder = {};
-    let isFirstTouch = useRef(true);
-    let touchEvent = useRef('');
-    let initialDistance = useRef(0);
+    const isFirstTouch = useRef(true);
+    const touchEvent = useRef('');
+    const initialDistance = useRef(0);
     propsRef.current = props;
     useEffect(() => {
         if (scale && (scaleValue.current._value !== originScaleValue)) {
@@ -55,7 +56,7 @@ const _MovableView = forwardRef((props, ref) => {
             Animated.spring(scaleValue.current, {
                 toValue: clampedScale,
                 friction,
-                useNativeDriver: false,
+                useNativeDriver: false
             }).start(() => {
                 bindscale && bindscale(getCustomEvent('scale', {}, {
                     detail: {
@@ -186,7 +187,7 @@ const _MovableView = forwardRef((props, ref) => {
                         null,
                         {
                             dx: direction === 'all' || direction === 'horizontal' ? pan.current.x : new Animated.Value(0),
-                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0),
+                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0)
                         }
                     ], {
                         useNativeDriver: false
@@ -316,8 +317,8 @@ const _MovableView = forwardRef((props, ref) => {
         ref: nodeRef,
         ...panResponder.panHandlers,
         onLayout,
-        ...(hasTouchmove() ? { 'bindtouchmove': onTouchMove } : {}),
-        ...(hasCatchTouchmove() ? { 'catchtouchmove': onCatchTouchMove } : {}),
+        ...(hasTouchmove() ? { bindtouchmove: onTouchMove } : {}),
+        ...(hasCatchTouchmove() ? { catchtouchmove: onCatchTouchMove } : {})
     }, [
         'children',
         'style',

package/lib/runtime/components/react/dist/mpx-picker/date.jsx

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