@mpxjs/webpack-plugin 2.9.69 → 2.9.70

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

@@ -17,7 +17,7 @@
  * ✔ cursor-color
  * ✔ selection-start
  * ✔ selection-end
- * ✘ adjust-position
+ * ✔ adjust-position
  * ✘ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
@@ -37,13 +37,13 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react';
+import { forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { Platform, TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout } from './utils';
+import { parseInlineStyle, useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { FormContext } from './context';
+import { FormContext, KeyboardAvoidContext } from './context';
 const keyboardTypeMap = {
     text: 'default',
     number: 'numeric',
@@ -54,10 +54,11 @@ const keyboardTypeMap = {
     }) || ''
 };
 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-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, 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, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
+    const setKeyboardAvoidEnabled = useContext(KeyboardAvoidContext);
     let formValuesMap;
     if (formContext) {
         formValuesMap = formContext.formValuesMap;
@@ -66,21 +67,19 @@ const Input = forwardRef((props, ref) => {
     const defaultValue = type === 'number' && value ? value + '' : value;
     const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
     const textAlignVertical = multiline ? 'top' : 'auto';
-    const tmpValue = useRef();
+    const tmpValue = useRef(defaultValue);
     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 styleObj = extendObject({ padding: 0, backgroundColor: '#fff' }, style, multiline && autoHeight
+        ? { minHeight: 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);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     useEffect(() => {
         if (inputValue !== value) {
@@ -203,6 +202,9 @@ const Input = forwardRef((props, ref) => {
             }
         };
     }, []);
+    useEffect(() => {
+        setKeyboardAvoidEnabled?.(adjustPosition);
+    }, [adjustPosition]);
     useUpdateEffect(() => {
         if (!nodeRef?.current) {
             return;
@@ -211,26 +213,51 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [focus]);
-    const composeStyle = { ...normalStyle, ...layoutStyle };
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: {
-            padding: 0,
-            ...composeStyle,
-            ...multiline && autoHeight && {
-                height: Math.max(composeStyle?.minHeight || 35, contentHeight)
-            }
-        },
-        ...layoutProps,
+        style: extendObject({}, normalStyle, layoutStyle),
+        allowFontScaling,
+        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
+    }, layoutProps, {
         onFocus: bindfocus && onInputFocus,
         onBlur: bindblur && onInputBlur,
         onKeyPress: bindconfirm && onKeyPress,
         onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: bindselectionchange && onSelectionChange
-    }, [], {
+        onSelectionChange: bindselectionchange && onSelectionChange,
+        onTextInput: onTextInput,
+        onChange: onChange,
+        onContentSizeChange: onContentSizeChange
+    }), [
+        'type',
+        'password',
+        'placeholder-style',
+        'disabled',
+        'auto-focus',
+        'focus',
+        'confirm-type',
+        'confirm-hold',
+        'cursor',
+        'cursor-color',
+        'selection-start',
+        'selection-end'
+    ], {
         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} onContentSizeChange={onContentSizeChange}/>);
+    return createElement(TextInput, innerProps);
 });
 Input.displayName = 'MpxInput';
 export default Input;

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

@@ -1,12 +1,12 @@
 /**
  * ✘ for
  */
-import { useRef, forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback, createElement } from 'react';
 import { View } from 'react-native';
 import { noop, warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils';
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 import { LabelContext } from './context';
 const Label = forwardRef((labelProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(labelProps);
@@ -16,15 +16,12 @@ const Label = forwardRef((labelProps, ref) => {
     const defaultStyle = {
         flexDirection: 'row'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, 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 });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     if (backgroundStyle) {
         warn('Label does not support background image-related styles!');
     }
@@ -36,24 +33,20 @@ const Label = forwardRef((labelProps, ref) => {
         bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
         contextRef.current.triggerChange(evt);
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
+        style: extendObject({}, innerStyle, layoutStyle)
+    }, layoutProps, {
         bindtap: onTap
-    }, [], {
+    }), [], {
         layoutRef
     });
-    return <View {...innerProps}>
-      <LabelContext.Provider value={contextRef}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </LabelContext.Provider>
-    </View>;
+    return createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 Label.displayName = 'MpxLabel';
 export default Label;

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

@@ -2,34 +2,31 @@
  * ✘ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, createElement } from 'react';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, wrapChildren, useLayout } from './utils';
+import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 const _MovableArea = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const movableViewRef = useRef(null);
-    useNodesRef(props, ref, movableViewRef);
+    useNodesRef(props, ref, movableViewRef, {
+        style: normalStyle
+    });
     const contextValue = useMemo(() => ({
         height: normalStyle.height || 10,
         width: normalStyle.width || 10
     }), [normalStyle.width, normalStyle.height]);
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
-    const innerProps = useInnerProps(props, {
-        style: { height: contextValue.height, width: contextValue.width, overflow: 'hidden', ...normalStyle, ...layoutStyle },
-        ref: movableViewRef,
-        ...layoutProps
-    }, [], { layoutRef });
-    return (<MovableAreaContext.Provider value={contextValue}>
-      <View {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </View>
-    </MovableAreaContext.Provider>);
+    const innerProps = useInnerProps(props, extendObject({
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+    }, layoutProps), [], { layoutRef });
+    return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 _MovableArea.displayName = 'MpxMovableArea';
 export default _MovableArea;

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

@@ -17,12 +17,12 @@
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo } from 'react';
+import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
 import { StyleSheet } from 'react-native';
 import { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 const styles = StyleSheet.create({
@@ -64,7 +64,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const waitForHandlers = flatGesture(waitFor);
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle: styles.container,
+        style: normalStyle,
         gestureRef: movableGestureRef
     });
     const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
@@ -416,16 +416,16 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     };
     const catchEventHandlers = injectCatchEvent(props);
     const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
-    return (<GestureDetector gesture={gesture}>
-      <Animated.View ref={nodeRef} onLayout={onLayout} style={[innerStyle, animatedStyles, layoutStyle]} {...catchEventHandlers}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </Animated.View>
-    </GestureDetector>);
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, extendObject({
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+    }, catchEventHandlers), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 _MovableView.displayName = 'MpxMovableView';
 export default _MovableView;

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

@@ -1,4 +1,4 @@
-import { useCallback, forwardRef } from 'react';
+import { useCallback, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
@@ -27,9 +27,7 @@ const _Navigator = forwardRef((props, ref) => {
         ref,
         bindtap: handleClick
     });
-    return (<MpxView {...innerProps}>
-      {children}
-    </MpxView>);
+    return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

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

@@ -23,12 +23,15 @@ function dateToString(date, fields = 'day') {
     return ret;
 }
 const _DatePicker = forwardRef((props, ref) => {
-    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props;
+    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props;
     const [datevalue, setDateValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         value && setDateValue(value);
     }, [value]);
@@ -48,6 +51,7 @@ const _DatePicker = forwardRef((props, ref) => {
         });
     };
     const dateProps = {
+        ref: nodeRef,
         precision: fields,
         value: formatTimeStr(datevalue),
         minDate: formatTimeStr(start),

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

@@ -28,10 +28,12 @@ import { FormContext } from '../context';
  * ✘ bindcolumnchange
  */
 const _Picker = forwardRef((props, ref) => {
-    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
+    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props;
     const innerLayout = useRef({});
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [], { layoutRef: innerLayout });
@@ -78,7 +80,7 @@ const _Picker = forwardRef((props, ref) => {
         bindcolumnchange && bindcolumnchange(eventData);
     };
     const commonProps = {
-        ...{ innerProps },
+        ...innerProps,
         mode,
         children,
         bindchange: onChange,

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

@@ -77,7 +77,7 @@ function getColumnIndexByValue(range = [], column, value = []) {
     return changeIndex;
 }
 const _MultiSelectorPicker = forwardRef((props, ref) => {
-    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props;
+    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props;
     const formatRange = formatRangeFun(range, props['range-key']);
     const initValue = getInnerValueByIndex(formatRange, value);
     // 选中的索引值
@@ -87,7 +87,10 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -117,6 +120,7 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: selected,
         cols: range.length,

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

@@ -35,13 +35,16 @@ function formateRegionData(clObj = [], customItem, depth = 2) {
     return obj;
 }
 const _RegionPicker = forwardRef((props, ref) => {
-    const { children, value, bindchange, bindcancel, disabled } = props;
+    const { children, value, bindchange, bindcancel, disabled, style } = props;
     const formatRegionData = formateRegionData(regionData, props['custom-item']);
     const [regionvalue, setRegionValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const onChange = (value) => {
         // 通过 value 查找 code
         let tmp = regionData;
@@ -75,6 +78,7 @@ const _RegionPicker = forwardRef((props, ref) => {
         bindcancel && bindcancel();
     };
     const regionProps = {
+        ref: nodeRef,
         data: formatRegionData,
         value: regionvalue,
         onChange,

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

@@ -18,7 +18,7 @@ const formatRangeFun = (range, rangeKey = '') => {
     return newRange;
 };
 const _SelectorPicker = forwardRef((props, ref) => {
-    const { range, children, value, disabled, bindchange, bindcancel } = props;
+    const { range, children, value, disabled, bindchange, bindcancel, style } = props;
     // 格式化数据为Array<*>
     const formatRange = formatRangeFun(range, props['range-key']);
     // 选中的索引值
@@ -28,7 +28,10 @@ const _SelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -53,6 +56,7 @@ const _SelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: [selected],
         cols: 1,

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

@@ -1,5 +1,5 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView } from '@ant-design/react-native';
+import { PickerView, Portal } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。
@@ -11,8 +11,8 @@ const styles = {
     showModal: {
         backgroundColor: 'black',
         opacity: 0.5,
-        position: 'absolute',
-        width: '100%'
+        width: '100%',
+        height: '100%'
     },
     hideModal: {
         opacity: 1,
@@ -117,7 +117,7 @@ function checkSelectedIsValid(strStart, strEnd, selected) {
 */
 // start="02:10" end = 23:01
 const _TimePicker = forwardRef((props, ref) => {
-    const { children, start, end, value, bindchange, bindcancel, disabled } = props;
+    const { children, start, end, value, bindchange, bindcancel, style } = props;
     const defaultProps = {
         start: '00:10',
         end: '23:59'
@@ -127,11 +127,11 @@ const _TimePicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style });
     // 存储modal的布局信息
     const modalLayoutRef = useRef({});
     const modalRef = useRef(null);
-    useNodesRef(props, ref, modalRef, {});
     const [visible, setVisible] = useState(false);
     const columnData = generateColumns();
     const [data, setData] = useState(columnData);
@@ -175,12 +175,6 @@ const _TimePicker = forwardRef((props, ref) => {
         else {
             // [9, 13]
             setTimeValue(date);
-            const strDate = formatStr(date);
-            bindchange && bindchange({
-                detail: {
-                    value: strDate
-                }
-            });
         }
     };
     const onElementLayout = () => {
@@ -197,6 +191,7 @@ const _TimePicker = forwardRef((props, ref) => {
     };
     const renderModalChildren = () => {
         const pickerProps = {
+            ref: nodeRef,
             data,
             value: timevalue,
             defaultValue: timevalue,
@@ -230,15 +225,15 @@ const _TimePicker = forwardRef((props, ref) => {
       </TouchableWithoutFeedback>
     </View>;
     };
-    const strStyle = visible ? styles.showModal : styles.hideModal;
-    const mheight = Math.floor(offsetTop);
     // Animated.View
     return (<>
-    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+    <Portal>
+      <View style={visible ? styles.showModal : styles.hideModal}>
       <Modal animationType="slide" transparent={true} visible={visible}>
         {renderModalChildren()}
       </Modal>
     </View>
+    </Portal>
     {renderChildren()}
   </>);
 });

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

@@ -14,7 +14,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const { textStyle } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
     const scrollViewRef = useRef(null);
-    useNodesRef(props, ref, scrollViewRef, {});
+    useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle
+    });
     const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle;
     const [itemRawH, setItemRawH] = useState(0); // 单个选项真实渲染高度
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);

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

@@ -25,7 +25,9 @@ const _PickerView = forwardRef((props, ref) => {
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    useNodesRef(props, ref, nodeRef, {});
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
@@ -50,7 +52,7 @@ const _PickerView = forwardRef((props, ref) => {
     };
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: extendObject(normalStyle, layoutStyle, {
+        style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
         }),
@@ -59,7 +61,7 @@ const _PickerView = forwardRef((props, ref) => {
     const renderColumn = (child, index, columnData, initialIndex) => {
         const extraProps = {};
         const childProps = child?.props || {};
-        const wrappedProps = extendObject(childProps, {
+        const wrappedProps = extendObject({}, childProps, {
             columnData,
             ref: cloneRef,
             columnIndex: index,

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

@@ -1,13 +1,13 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, wrapChildren } from './utils';
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 const radioGroup = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
@@ -22,13 +22,10 @@ const radioGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, 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 });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getValue = () => {
         for (const key in groupValue) {
@@ -74,21 +71,16 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), ['name'], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={contextValue}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </RadioGroupContext.Provider>
-    </View>);
+    return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;