@mpxjs/webpack-plugin 2.10.5 → 2.10.6

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

@@ -22,6 +22,7 @@ import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './co
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export interface RadioGroupProps {
   name: string
@@ -71,6 +72,7 @@ const radioGroup = forwardRef<
   const styleObj = extendObject({}, defaultStyle, style)
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -156,18 +158,27 @@ const radioGroup = forwardRef<
     }
   )
 
-  return createElement(View, innerProps, createElement(
-    RadioGroupContext.Provider,
-    { value: contextValue },
-    wrapChildren(
-      props,
+  const finalComponent = createElement(View, innerProps,
+    createElement(
+      RadioGroupContext.Provider,
       {
-        hasVarDec,
-        varContext: varContextRef.current
-      }
+        value: contextValue
+      },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current
+        }
+      )
     )
   )
-  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 radioGroup.displayName = 'MpxRadioGroup'

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

@@ -12,6 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import Icon from './mpx-icon'
+import Portal from './mpx-portal'
 
 export interface RadioProps {
   value?: string
@@ -117,6 +118,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     }
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -192,7 +194,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       }
     }, [checked])
 
-    return createElement(View, innerProps,
+    const finalComponent = createElement(View, innerProps,
       createElement(
         View,
         { style: defaultStyle },
@@ -213,6 +215,12 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
         }
       )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-rich-text/index.tsx

@@ -9,6 +9,7 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { useTransformStyle, useLayout, extendObject } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
+import Portal from '../mpx-portal'
 
 type Node = {
   type: 'node' | 'text'
@@ -69,7 +70,8 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     normalStyle,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(Object.assign({
     width: '100%',
     height: webViewHeight
@@ -109,7 +111,7 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return createElement(View, innerProps,
+  let finalComponent: JSX.Element = createElement(View, innerProps,
     createElement(WebView, {
       source: { html: generateHTML(html) },
       onMessage: (event: WebViewMessageEvent) => {
@@ -117,6 +119,12 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
       }
     })
   )
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _RichText.displayName = 'mpx-rich-text'

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

@@ -35,11 +35,12 @@ import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-nati
 import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
 import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
-import { warn } from '@mpxjs/utils'
+import { warn, hasOwn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
+import Portal from './mpx-portal'
 
 interface ScrollViewProps {
   children?: ReactNode
@@ -194,6 +195,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     hasVarDec,
     varContextRef,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
@@ -643,7 +645,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
-      style: extendObject({}, innerStyle, layoutStyle),
+      style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
+        ? {}
+        : {
+            flexGrow: 0
+          }, innerStyle, layoutStyle),
       pinchGestureEnabled: false,
       alwaysBounceVertical: false,
       alwaysBounceHorizontal: false,
@@ -764,7 +770,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     )
   )
 
-  return hasRefresher ? withRefresherScrollView : commonScrollView
+  let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView
+
+  if (hasPositionFixed) {
+    scrollViewComponent = createElement(Portal, null, scrollViewComponent)
+  }
+  return scrollViewComponent
 })
 
 _ScrollView.displayName = 'MpxScrollView'

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -1,6 +1,6 @@
 import { View } from 'react-native'
 import Animated, { useAnimatedStyle, interpolate, SharedValue } from 'react-native-reanimated'
-import { ReactNode, forwardRef, useRef, useContext } from 'react'
+import { ReactNode, forwardRef, useRef, useContext, createElement } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, extendObject } from './utils'
@@ -95,24 +95,16 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
       transform: transformStyle
     })
   })
-  return (
-    <Animated.View
-      {...innerProps}
-      style={[innerStyle, layoutStyle, itemAnimatedStyle, customStyle]}
-      data-itemId={props['item-id']}>
-      {
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
-      }
-    </Animated.View>
-  )
+  const mergeProps = extendObject({}, innerProps, {
+    style: [innerStyle, layoutStyle, itemAnimatedStyle, customStyle],
+    'data-itemId': props['item-id']
+  })
+  return createElement(Animated.View, mergeProps, wrapChildren(props, {
+    hasVarDec,
+    varContext: varContextRef.current,
+    textStyle,
+    textProps
+  }))
 })
 
 _SwiperItem.displayName = 'MpxSwiperItem'

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

@@ -1,12 +1,13 @@
 import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import { GestureDetector, Gesture, PanGesture } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
-import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo } from 'react'
+import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture } from './utils'
 import { SwiperContext } from './context'
+import Portal from './mpx-portal'
 /**
  * ✔ indicator-dots
  * ✔ indicator-color
@@ -45,7 +46,7 @@ interface SwiperProps {
   vertical?: boolean
   style: {
     [key: string]: any
-  }
+  };
   'easing-function'?: EaseType
   'previous-margin'?: string
   'next-margin'?: string
@@ -53,8 +54,11 @@ interface SwiperProps {
   'enable-var': boolean
   'parent-font-size'?: number
   'parent-width'?: number
-  'parent-height'?: number
+  'parent-height'?: number;
   'external-var-context'?: Record<string, any>
+  'wait-for'?: Array<GestureHandler>
+  'simultaneous-handlers'?: Array<GestureHandler>
+  disableGesture?: boolean
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
@@ -126,7 +130,7 @@ const easeMap = {
 
 const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
   const {
-    'indicator-dots': showsPagination,
+    'indicator-dots': showPagination,
     'indicator-color': dotColor = 'rgba(0, 0, 0, .3)',
     'indicator-active-color': activeDotColor = '#000000',
     'enable-var': enableVar = false,
@@ -134,21 +138,30 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'external-var-context': externalVarContext,
+    'simultaneous-handlers': originSimultaneousHandlers = [],
+    'wait-for': waitFor = [],
     style = {},
     autoplay = false,
-    circular = false
+    circular = false,
+    disableGesture = false
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
   const nodeRef = useRef<View>(null)
-  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {})
+  // 手势协同gesture 1.0
+  const swiperGestureRef = useRef<PanGesture>()
+  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {
+    // scrollView内部会过滤是否绑定了gestureRef，withRef(swiperGestureRef)给gesture对象设置一个ref(2.0版本)
+    gestureRef: swiperGestureRef
+  })
   // 计算transfrom之类的
   const {
     normalStyle,
     hasVarDec,
     varContextRef,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, {
@@ -195,6 +208,27 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTime = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+
+  const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+  const waitForHandlers = flatGesture(waitFor)
+  // 判断gesture手势是否需要协同处理、等待手势失败响应
+  const gestureSwitch = useRef(false)
+  // 初始化上一次的手势
+  const prevSimultaneousHandlersRef = useRef<Array<GestureHandler>>(originSimultaneousHandlers || [])
+  const prevWaitForHandlersRef = useRef<Array<GestureHandler>>(waitFor || [])
+  const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+  (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index])
+
+  const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+    (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index])
+
+  if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+    gestureSwitch.current = !gestureSwitch.current
+  }
+  // 存储上一次的手势
+  prevSimultaneousHandlersRef.current = originSimultaneousHandlers || []
+  prevWaitForHandlersRef.current = waitFor || []
+
   const {
     // 存储layout布局信息
     layoutRef,
@@ -248,7 +282,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   })
 
   function renderPagination () {
-    if (children.length <= 1) return null
     const activeColor = activeDotColor || '#007aff'
     const unActionColor = dotColor || 'rgba(0,0,0,.2)'
     // 正常渲染所有dots
@@ -491,7 +524,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       offset.value = getOffset(currentIndex.value, step.value)
     }
   }, [circular, preMargin])
-
   const { gestureHandler } = useMemo(() => {
     function getTargetPosition (eventData: EventDataType) {
       'worklet'
@@ -574,6 +606,15 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         })
       }
     }
+    function handleBackInit () {
+      'worklet'
+      // 微信的效果
+      // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
+      offset.value = withTiming(0, {
+        duration: easeDuration,
+        easing: easeMap[easeingFunc]
+      })
+    }
     function handleBack (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
@@ -675,7 +716,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
-        if (isBoundary && circularShared.value) {
+        if (childrenLength.value > 1 && isBoundary && circularShared.value) {
           offset.value = resetOffset
         } else {
           offset.value = moveDistance + offset.value
@@ -691,6 +732,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         const eventData = {
           translation: moveDistance
         }
+        if (childrenLength.value === 1) {
+          return handleBackInit()
+        }
         // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
         if (!circularShared.value && !canMove(eventData)) {
           return
@@ -702,10 +746,25 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           handleEnd(eventData)
         }
       })
+      .withRef(swiperGestureRef)
+    // swiper横向,当y轴滑动5像素手势失效；swiper纵向只响应swiper的滑动事件
+    if (dir === 'x') {
+      gesturePan.activeOffsetX([-2, 2]).failOffsetY([-5, 5])
+    } else {
+      gesturePan.activeOffsetY([-2, 2]).failOffsetX([-5, 5])
+    }
+    // 手势协同2.0
+    if (simultaneousHandlers && simultaneousHandlers.length) {
+      gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers)
+    }
+
+    if (waitForHandlers && waitForHandlers.length) {
+      gesturePan.requireExternalGestureToFail(...waitForHandlers)
+    }
     return {
       gestureHandler: gesturePan
     }
-  }, [])
+  }, [gestureSwitch.current])
 
   const animatedStyles = useAnimatedStyle(() => {
     if (dir === 'x') {
@@ -715,34 +774,32 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   })
 
-  function renderSwiper () {
-    const arrPages: Array<ReactNode> | ReactNode = renderItems()
-    return (<View style={[normalStyle, layoutStyle, styles.swiper]} {...layoutProps} {...innerProps}>
-      <Animated.View style={[{
-        flexDirection: dir === 'x' ? 'row' : 'column',
-        width: '100%',
-        height: '100%'
-      }, animatedStyles]}>
-        {wrapChildren({
-          children: arrPages
-        }, {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        })}
-      </Animated.View>
-      {showsPagination && renderPagination()}
-    </View>)
+  let finalComponent: JSX.Element
+  const arrPages: Array<ReactNode> | ReactNode = renderItems()
+  const mergeProps = Object.assign({
+    style: [normalStyle, layoutStyle, styles.swiper]
+  }, layoutProps, innerProps)
+  const animateComponent = createElement(Animated.View, {
+    style: [{ flexDirection: dir === 'x' ? 'row' : 'column', width: '100%', height: '100%' }, animatedStyles]
+  }, wrapChildren({
+    children: arrPages
+  }, {
+    hasVarDec,
+    varContext: varContextRef.current,
+    textStyle,
+    textProps
+  }))
+  const renderChildrens = showPagination ? [animateComponent, renderPagination()] : animateComponent
+  finalComponent = createElement(View, mergeProps, renderChildrens)
+  if (!disableGesture) {
+    finalComponent = createElement(GestureDetector, {
+      gesture: gestureHandler
+    }, finalComponent)
   }
-
-  if (children.length === 1) {
-    return renderSwiper()
-  } else {
-    return (<GestureDetector gesture={gestureHandler}>
-      {renderSwiper()}
-    </GestureDetector>)
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
   }
+  return finalComponent
 })
 SwiperWrapper.displayName = 'MpxSwiperWrapper'
 

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

@@ -11,6 +11,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 
 import CheckBox from './mpx-checkbox'
+import Portal from './mpx-portal'
 import { FormContext, FormFieldValue } from './context'
 import { useTransformStyle, useLayout, extendObject } from './utils'
 
@@ -62,7 +63,8 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     normalStyle,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(style, {
     enableVar,
     externalVarContext,
@@ -151,7 +153,7 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     )
   }
 
-  return createElement(
+  let finalComponent: JSX.Element = createElement(
     Switch,
     extendObject({}, innerProps, {
       style: normalStyle,
@@ -161,6 +163,12 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
       ios_backgroundColor: '#FFF'
     })
   )
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _Switch.displayName = 'MpxSwitch'

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

@@ -6,6 +6,7 @@
  */
 import { Text, TextStyle, TextProps } from 'react-native'
 import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react'
+import Portal from './mpx-portal'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 import { useTransformStyle, wrapChildren, extendObject } from './utils'
@@ -38,7 +39,8 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
   const {
     normalStyle,
     hasVarDec,
-    varContextRef
+    varContextRef,
+    hasPositionFixed
   } = useTransformStyle(style, {
     enableVar,
     externalVarContext,
@@ -68,13 +70,19 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     ]
   )
 
-  return createElement(Text, innerProps, wrapChildren(
+  let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren(
     props,
     {
       hasVarDec,
       varContext: varContextRef.current
     }
   ))
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _Text.displayName = 'MpxText'

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

@@ -74,6 +74,7 @@ import {
 } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
+import Portal from './mpx-portal'
 
 interface VideoProps {
   src: string
@@ -170,7 +171,7 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
 
   propsRef.current = props
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } =
+  const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } =
     useTransformStyle(extendObject({}, styles.container, style), {
       enableVar,
       externalVarContext,
@@ -381,9 +382,13 @@ const MpxVideo = forwardRef<HandlerRef<View, VideoProps>, VideoProps>((videoProp
     ],
     { layoutRef }
   )
-  return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
+  let videoComponent: JSX.Element = createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef },
     createElement(Video, innerProps)
   )
+  if (hasPositionFixed) {
+    videoComponent = createElement(Portal, null, videoComponent)
+  }
+  return videoComponent
 })
 
 export default MpxVideo

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

@@ -638,10 +638,14 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
-    {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size)} />}
-    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage))}
-  </View>
+  const backgroundProps: ViewProps = extendObject({ key: 'backgroundImage' }, needLayout ? { onLayout } : {},
+    { style: extendObject({}, inheritStyle(innerStyle), StyleSheet.absoluteFillObject, { overflow: 'hidden' as const }) }
+  )
+
+  return createElement(View, backgroundProps,
+    show && type === 'linear' && createElement(LinearGradient, extendObject({ useAngle: true }, imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size))),
+    show && type === 'image' && renderImage(imageStyleToProps(preImageInfo, sizeInfo.current as Size, layoutInfo.current as Size), enableFastImage)
+  )
 }
 
 interface WrapChildrenConfig {

package/lib/runtime/components/react/utils.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
@@ -503,8 +503,8 @@ export function splitProps<T extends Record<string, any>> (props: T): {
 interface LayoutConfig {
   props: Record<string, any>
   hasSelfPercent: boolean
-  setWidth: Dispatch<SetStateAction<number>>
-  setHeight: Dispatch<SetStateAction<number>>
+  setWidth?: Dispatch<SetStateAction<number>>
+  setHeight?: Dispatch<SetStateAction<number>>
   onLayout?: (event?: LayoutChangeEvent) => void
   nodeRef: React.RefObject<any>
 }
@@ -636,7 +636,7 @@ export function renderImage (
   enableFastImage = false
 ) {
   const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? FastImage : Image
-  return <Component {...imageProps} />
+  return createElement(Component, imageProps)
 }
 
 export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string) {

package/lib/runtime/components/web/mpx-web-view.vue

@@ -197,4 +197,4 @@ export default {
   right: 0;
   bottom: 0;
 }
-</style>
+</style>

package/lib/runtime/mpxGlobal.js

@@ -0,0 +1 @@
+module.exports = Object.create(global)

package/lib/runtime/optionProcessor.d.ts

@@ -4,8 +4,13 @@ declare global {
       [key: string]: any
     }
   }
+  interface Window {
+     mpxGlobal: Record<string, any>
+  }
 }
 
+declare const mpxGlobal: Record<string, any>
+
 export function processComponentOption (...args: any): object
 
 export function getComponent (...args: any): object