diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx
index 53b796ef9..3da976c34 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx
@@ -207,35 +207,10 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
       }
     }, [checked])
 
-    // return (
-    //   <View {...innerProps}>
-    //     <View style={defaultStyle}>
-    //       <Icon
-    //         type='success_no_circle'
-    //         size={18}
-    //         color={disabled ? '#ADADAD' : color}
-    //         style={isChecked ? styles.iconChecked : styles.icon}
-    //       />
-    //     </View>
-    //     {
-    //       wrapChildren(
-    //         props,
-    //         {
-    //           hasVarDec,
-    //           varContext: varContextRef.current,
-    //           textStyle,
-    //           textProps
-    //         }
-    //       )
-    //     }
-    //   </View>
-    // )
-    return createElement(
-      View,
-      innerProps,
+    return createElement(View, innerProps,
       createElement(
         View,
-        { style: defaultStyle }, // 内部 View 的样式
+        { style: defaultStyle },
         createElement(Icon, {
           type: 'success_no_circle',
           size: 18,
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
index defda9083..100a321ea 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
@@ -5,7 +5,7 @@
  * ✔ bindreset
  */
 import { View } from 'react-native'
-import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import { FormContext } from './context'
@@ -102,25 +102,20 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
       reset
     }
   }, [])
-  return (
-    <View
-      {...innerProps}
-    >
-      <FormContext.Provider value={contextValue}>
-        {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
-        }
-      </FormContext.Provider>
-    </View>
-  )
+
+  return createElement(View, innerProps, createElement(
+    FormContext.Provider,
+    { value: contextValue },
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      }
+    )
+  ))
 })
 
 _Form.displayName = 'MpxForm'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx
index e26d89558..d1a4edece 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx
@@ -3,7 +3,7 @@
  * ✔ size
  * ✔ color
  */
-import { JSX, forwardRef, useRef } from 'react'
+import { JSX, forwardRef, useRef, createElement } from 'react'
 import { Text, TextStyle, Image } from 'react-native'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -93,7 +93,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       }
     )
 
-    return <Image {...innerProps} />
+    return createElement(Image, innerProps)
   }
 )
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx
index 85d815a4f..12d83640f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx
@@ -10,7 +10,7 @@
  * ✔ bindtap
  * ✔ DEFAULT_SIZE
  */
-import { useEffect, useMemo, useState, useRef, forwardRef } from 'react'
+import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react'
 import {
   Image as RNImage,
   View,
@@ -359,35 +359,31 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  return (
-    <View {...innerProps}>
-      {
-        isSvg
-          ? <SvgCssUri
-              uri={src}
-              onLayout={onSvgLoad}
-              onError={binderror && onSvgError}
-              style={extendObject(
-                { transformOrigin: 'top left' },
-                modeStyle
-              )}
-            />
-          : <RNImage
-              source={{ uri: src }}
-              resizeMode={resizeMode}
-              onLoad={bindload && onImageLoad}
-              onError={binderror && onImageError}
-              style={extendObject(
-                {
-                  transformOrigin: 'top left',
-                  width: isCropMode ? imageWidth : '100%',
-                  height: isCropMode ? imageHeight : '100%'
-                },
-                isCropMode ? modeStyle : {}
-              )}
-            />
-      }
-    </View>
+  return createElement(View, innerProps,
+    isSvg
+      ? createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
+        style: extendObject(
+          { transformOrigin: 'top left' },
+          modeStyle
+        )
+      })
+      : createElement(RNImage, {
+        source: { uri: src },
+        resizeMode: resizeMode,
+        onLoad: bindload && onImageLoad,
+        onError: binderror && onImageError,
+        style: extendObject(
+          {
+            transformOrigin: 'top left',
+            width: isCropMode ? imageWidth : '100%',
+            height: isCropMode ? imageHeight : '100%'
+          },
+          isCropMode ? modeStyle : {}
+        )
+      })
   )
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
index e8a466aff..71196c3e1 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
@@ -37,7 +37,7 @@
  * ✘ bind:keyboardcompositionend
  * ✘ bind:onkeyboardheightchange
  */
-import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react'
+import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react'
 import {
   KeyboardTypeOptions,
   Platform,
@@ -405,7 +405,22 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
-        allowFontScaling
+        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,
       {
@@ -413,16 +428,17 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onBlur: bindblur && onInputBlur,
         onKeyPress: bindconfirm && onKeyPress,
         onSubmitEditing: bindconfirm && multiline && onSubmitEditing,
-        onSelectionChange: bindselectionchange && onSelectionChange
+        onSelectionChange: bindselectionchange && onSelectionChange,
+        onTextInput: onTextInput,
+        onChange: onChange,
+        onContentSizeChange: onContentSizeChange
       }
     ),
     [
       'type',
-      'keyboardType',
       'password',
       'placeholder-style',
       'disabled',
-      'maxlength',
       'auto-focus',
       'focus',
       'confirm-type',
@@ -430,37 +446,13 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       'cursor',
       'cursor-color',
       'selection-start',
-      'selection-end',
-      'multiline'
+      'selection-end'
     ],
     {
       layoutRef
     }
   )
-
-  return (
-    <TextInput
-      {...innerProps}
-      keyboardType={keyboardType as KeyboardTypeOptions}
-      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'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx
index 4c4eb5879..4ef3fe16a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx
@@ -1,7 +1,7 @@
 /**
  * ✘ for
  */
-import { JSX, useRef, forwardRef, ReactNode, useCallback } from 'react'
+import { JSX, useRef, forwardRef, ReactNode, useCallback, createElement } from 'react'
 import { View, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { noop, warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -92,21 +92,19 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       }
     )
 
-    return <View {...innerProps}>
-      <LabelContext.Provider value={contextRef}>
+    return createElement(View, innerProps, createElement(
+      LabelContext.Provider,
+      { value: contextRef },
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </LabelContext.Provider>
-    </View>
+      )
+    ))
   }
 )
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx
index b354fc359..3e937be81 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx
@@ -3,7 +3,7 @@
  */
 
 import { View } from 'react-native'
-import { JSX, forwardRef, ReactNode, useRef, useMemo } from 'react'
+import { JSX, forwardRef, ReactNode, useRef, useMemo, createElement } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
@@ -51,23 +51,17 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     ref: movableViewRef
   }, layoutProps), [], { layoutRef })
 
-  return (
-    <MovableAreaContext.Provider value={contextValue}>
-      <View
-        {...innerProps}
-      >
+  return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+    View,
+    innerProps,
+    wrapChildren(
+      props,
       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
+        hasVarDec,
+        varContext: varContextRef.current
       }
-      </View>
-    </MovableAreaContext.Provider>
-  )
+    )
+  ))
 })
 
 _MovableArea.displayName = 'MpxMovableArea'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
index a5b29a9a3..0243b04c6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
@@ -17,12 +17,12 @@
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo } from 'react'
+import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, createElement } from 'react'
 import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native'
 import { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -518,28 +518,45 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
 
   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 (
+  //   <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'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx
index 90d3465f4..3de5cfd55 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx
@@ -8,7 +8,7 @@
  * ✔ delta
  */
 import { View } from 'react-native'
-import { useCallback, forwardRef, JSX } from 'react'
+import { useCallback, forwardRef, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 
@@ -53,13 +53,7 @@ const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element =
     bindtap: handleClick
   })
 
-  return (
-    <MpxView
-      {...innerProps}
-    >
-      {children}
-    </MpxView>
-  )
+  return createElement(MpxView, innerProps, children)
 })
 
 _Navigator.displayName = 'MpxNavigator'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx
index 5ded44937..2c1c35db0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx
@@ -8,7 +8,8 @@ import {
   ReactNode,
   useContext,
   useMemo,
-  useEffect
+  useEffect,
+  createElement
 } from 'react'
 import {
   View,
@@ -154,20 +155,17 @@ const radioGroup = forwardRef<
     }
   )
 
-  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
+      }
+    )
+  )
   )
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx
index c1662f5cc..dd760fcec 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx
@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction, createElement } from 'react'
 import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
@@ -193,32 +193,26 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       }
     }, [checked])
 
-    return (
-      <View {...innerProps}>
-        <View style={defaultStyle}>
-          <Icon
-            type='success'
-            size={24}
-            color={disabled ? '#E1E1E1' : color}
-            style={{
-              ...styles.icon,
-              ...(isChecked && styles.iconChecked),
-              ...(disabled && styles.iconDisabled)
-            }}
-          />
-        </View>
+    return createElement(View, innerProps,
+      createElement(
+        View,
+        { style: defaultStyle },
+        createElement(Icon, {
+          type: 'success',
+          size: 24,
+          color: disabled ? '#E1E1E1' : color,
+          style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled)
+        })
+      ),
+      wrapChildren(
+        props,
         {
-          wrapChildren(
-            props,
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
         }
-      </View>
+      )
     )
   }
 )
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx
index 46827be06..7c5d53769 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx
@@ -1,7 +1,7 @@
 /**
  * ✔ enable
  */
-import { ReactNode } from 'react'
+import { ReactNode, createElement, Fragment } from 'react'
 import { Portal } from '@ant-design/react-native'
 import { warn } from '@mpxjs/utils'
 interface RootPortalProps {
@@ -16,10 +16,8 @@ const _RootPortal = (props: RootPortalProps) => {
     warn('The root-portal component does not support the style prop.')
   }
   return enable
-    ? <Portal>
-      {children}
-    </Portal>
-    : <>{children}</>
+    ? createElement(Portal, null, children)
+    : createElement(Fragment, null, children)
 }
 
 _RootPortal.displayName = 'MpxRootPortal'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 17f45a6e4..c52dc960f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -33,7 +33,7 @@
  */
 import { ScrollView } from 'react-native-gesture-handler'
 import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -491,32 +491,26 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  return (
-    <ScrollView
-      {...innerProps}
-      refreshControl={refresherEnabled
-        ? (
-          <RefreshControl
-            progressBackgroundColor={refresherBackground}
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
-          />
-          )
-        : undefined}
-    >
-       {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
+  return createElement(
+    ScrollView,
+    extendObject({}, innerProps, {
+      refreshControl: refresherEnabled
+        ? createElement(RefreshControl, extendObject({
+          progressBackgroundColor: refresherBackground,
+          refreshing: refreshing,
+          onRefresh: onRefresh
+        }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+        : undefined
+    }),
+    wrapChildren(
+      props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
       }
-    </ScrollView>
+    )
   )
 })
 
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx
index 026424c30..7a1c00807 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx
@@ -5,7 +5,7 @@
  * ✔ color
  */
 import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
-import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext, createElement } from 'react'
 import { warn } from '@mpxjs/utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -136,22 +136,26 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   })
 
   if (type === 'checkbox') {
-    return <CheckBox
-      {...innerProps}
-      color={color}
-      style={normalStyle}
-      checked={isChecked}
-    />
+    return createElement(
+      CheckBox,
+      extendObject({}, innerProps, {
+        color: color,
+        style: normalStyle,
+        checked: isChecked
+      })
+    )
   }
 
-  return <Switch
-    {...innerProps}
-    style={normalStyle}
-    value={isChecked}
-    trackColor={{ false: '#FFF', true: color }}
-    thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
-    ios_backgroundColor="#FFF"
-  />
+  return createElement(
+    Switch,
+    extendObject({}, innerProps, {
+      style: normalStyle,
+      value: isChecked,
+      trackColor: { false: '#FFF', true: color },
+      thumbColor: isChecked ? '#FFF' : '#f4f3f4',
+      ios_backgroundColor: '#FFF'
+    })
+  )
 })
 
 _Switch.displayName = 'MpxSwitch'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx
index 6962dc965..e3364de84 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx
@@ -5,7 +5,7 @@
  * ✘ decode
  */
 import { Text, TextStyle, TextProps } from 'react-native'
-import { useRef, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils'
@@ -65,21 +65,13 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     layoutRef
   })
 
-  return (
-    <Text
-      {...innerProps}
-    >
-      {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current
-          }
-        )
-      }
-    </Text>
-  )
+  return createElement(Text, innerProps, wrapChildren(
+    props,
+    {
+      hasVarDec,
+      varContext: varContextRef.current
+    }
+  ))
 })
 
 _Text.displayName = 'MpxText'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx
index 35bb8403e..24e5907be 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx
@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { JSX, forwardRef } from 'react'
+import { JSX, forwardRef, createElement } from 'react'
 import { Keyboard, TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
-import { omit } from './utils'
+import { omit, extendObject } from './utils'
 import { HandlerRef } from './useNodesRef'
 
 export type TextareProps = Omit<
@@ -29,14 +29,15 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
       'multiline',
       'confirm-hold'
     ])
-    return (
-      <Input
-        ref={ref}
-        multiline
-        confirm-type='next'
-        bindblur={() => Keyboard.dismiss()}
-        {...restProps}
-      />
+
+    return createElement(
+      Input,
+      extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+      }, restProps)
     )
   }
 )
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
index 42b9d0a07..e419c7314 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
@@ -5,7 +5,7 @@
  * ✔ hover-stay-time
  */
 import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
 import useAnimationHooks from './useAnimationHooks'
@@ -814,17 +814,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     innerStyle,
     enableFastImage
   })
+
   return enableAnimation
-    ? (<Animated.View
-      {...innerProps}
-    >
-      {childNode}
-    </Animated.View>)
-    : (<View
-      {...innerProps}
-    >
-      {childNode}
-    </View>)
+    ? createElement(Animated.View, innerProps, childNode)
+    : createElement(View, innerProps, childNode)
 })
 
 _View.displayName = 'MpxView'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx
index 79038d756..d205fdc4e 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react'
+import { forwardRef, JSX, useEffect, useRef, useContext, useMemo, createElement } from 'react'
 import { noop, warn } from '@mpxjs/utils'
 import { View } from 'react-native'
 import { Portal } from '@ant-design/react-native'
@@ -177,16 +177,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onMessage: _message
     })
   }
-  return (<Portal>
-    <WebView
-      style={defaultWebViewStyle}
-      source={{ uri: src }}
-      ref={webViewRef}
-      {...events}
-      onNavigationStateChange={_changeUrl}
-      javaScriptEnabled={true}
-    ></WebView>
-  </Portal>)
+
+  return createElement(Portal, null, createElement(WebView, extendObject({
+    style: defaultWebViewStyle,
+    source: { uri: src },
+    ref: webViewRef,
+    javaScriptEnabled: true,
+    onNavigationStateChange: _changeUrl
+  }, events)))
 })
 
 _WebView.displayName = 'MpxWebview'