@mpxjs/webpack-plugin 2.9.66 → 2.9.69

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

@@ -5,7 +5,7 @@
  * ✔ lower-threshold
  * ✔ scroll-top
  * ✔ scroll-left
- * ✘ scroll-into-view
+ * ✔ scroll-into-view
  * ✔ scroll-with-animation
  * ✔ enable-back-to-top
  * ✘ enable-passive
@@ -38,7 +38,7 @@ import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext } from './context'
 
 interface ScrollViewProps {
@@ -61,12 +61,15 @@ interface ScrollViewProps {
   'scroll-top'?: number;
   'scroll-left'?: number;
   'enable-offset'?: boolean;
+  'scroll-into-view'?: string;
   'enable-trigger-intersection-observer'?: boolean;
   'enable-var'?: boolean;
   'external-var-context'?: Record<string, any>;
   'parent-font-size'?: number;
   'parent-width'?: number;
   'parent-height'?: number;
+  'wait-for'?: Array<GestureHandler>;
+  'simultaneous-handlers'?: Array<GestureHandler>;
   bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -78,6 +81,7 @@ interface ScrollViewProps {
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>
 }
 type ScrollAdditionalProps = {
   pinchGestureEnabled: boolean;
@@ -97,6 +101,7 @@ type ScrollAdditionalProps = {
   bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
@@ -106,6 +111,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     enhanced = false,
     bounces = true,
     style = {},
+    binddragstart,
+    binddragging,
+    binddragend,
+    bindtouchstart,
+    bindtouchmove,
+    bindtouchend,
     'scroll-x': scrollX = false,
     'scroll-y': scrollY = false,
     'enable-back-to-top': enableBackToTop = false,
@@ -118,13 +129,23 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'refresher-default-style': refresherDefaultStyle,
     'refresher-background': refresherBackground,
     'show-scrollbar': showScrollbar = true,
+    'scroll-into-view': scrollIntoView = '',
+    'scroll-top': scrollTop = 0,
+    'scroll-left': scrollLeft = 0,
+    'refresher-triggered': refresherTriggered,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight
+    'parent-height': parentHeight,
+    'simultaneous-handlers': originSimultaneousHandlers,
+    'wait-for': waitFor,
+    __selectRef
   } = props
 
+  const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
+  const waitForHandlers = flatGesture(waitFor)
+
   const [refreshing, setRefreshing] = useState(true)
 
   const snapScrollTop = useRef(0)
@@ -144,6 +165,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
   const intersectionObservers = useContext(IntersectionObserverContext)
 
+  const snapScrollIntoView = useRef<string>('')
+
   const {
     normalStyle,
     hasVarDec,
@@ -166,7 +189,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       fastDeceleration: false,
       decelerationDisabled: false,
       scrollTo: scrollToOffset
-    }
+    },
+    gestureRef: scrollViewRef
   })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
@@ -176,27 +200,41 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }
   useEffect(() => {
     if (
-      snapScrollTop.current !== props['scroll-top'] ||
-      snapScrollLeft.current !== props['scroll-left']
+      snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft
     ) {
-      snapScrollTop.current = props['scroll-top'] || 0
-      snapScrollLeft.current = props['scroll-left'] || 0
-
       initialTimeout.current = setTimeout(() => {
-        scrollToOffset(snapScrollLeft.current, snapScrollTop.current)
+        scrollToOffset(scrollLeft, scrollTop)
       }, 0)
 
       return () => {
         initialTimeout.current && clearTimeout(initialTimeout.current)
       }
     }
-  }, [props['scroll-top'], props['scroll-left']])
+  }, [scrollTop, scrollLeft])
 
   useEffect(() => {
-    if (refreshing !== props['refresher-triggered']) {
-      setRefreshing(!!props['refresher-triggered'])
+    if (refreshing !== refresherTriggered) {
+      setRefreshing(!!refresherTriggered)
+    }
+  }, [refresherTriggered])
+
+  useEffect(() => {
+    if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
+      snapScrollIntoView.current = scrollIntoView || ''
+      setTimeout(() => {
+        const refs = __selectRef(`#${scrollIntoView}`, 'node')
+        if (refs) {
+          const { nodeRef } = refs.getNodeInstance()
+          nodeRef.current?.measureLayout(
+            scrollViewRef.current,
+            (left: number, top:number) => {
+              scrollToOffset(left, top)
+            }
+          )
+        }
+      })
     }
-  }, [props['refresher-triggered']])
+  }, [scrollIntoView])
 
   function selectLength (size: { height: number; width: number }) {
     return !scrollX ? size.height : size.width
@@ -322,6 +360,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation })
       scrollOptions.current.scrollLeft = x
       scrollOptions.current.scrollTop = y
+      snapScrollLeft.current = x
+      snapScrollTop.current = y
     }
   }
 
@@ -334,7 +374,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   }
 
   function onScrollTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
-    const { binddragstart, bindtouchstart, enhanced } = props
+    const { bindtouchstart } = props
     bindtouchstart && bindtouchstart(e)
     if (enhanced) {
       binddragstart &&
@@ -350,7 +390,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
   function onScrollTouchMove (e: NativeSyntheticEvent<TouchEvent>) {
-    const { binddragging, bindtouchmove, enhanced } = props
     bindtouchmove && bindtouchmove(e)
     if (enhanced) {
       binddragging &&
@@ -366,27 +405,27 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onScrollEndDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { binddragend, enhanced } = props
+  function onScrollTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
+    bindtouchend && bindtouchend(e)
     if (enhanced) {
-      const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
-      const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
       binddragend &&
         binddragend(
           getCustomEvent('dragend', e, {
             detail: {
-              scrollLeft: scrollLeft,
-              scrollTop: scrollTop,
-              scrollHeight,
-              scrollWidth
+              scrollLeft: scrollOptions.current.scrollLeft || 0,
+              scrollTop: scrollOptions.current.scrollTop || 0
             },
             layoutRef
           }, props)
         )
-      updateScrollOptions(e, { scrollLeft, scrollTop })
     }
   }
 
+  function onScrollDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
+    updateScrollOptions(e, { scrollLeft, scrollTop })
+  }
+
   let scrollAdditionalProps: ScrollAdditionalProps = {
     style: { ...innerStyle, ...layoutStyle },
     pinchGestureEnabled: false,
@@ -399,11 +438,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     ref: scrollViewRef,
     onScroll: onScroll,
     onContentSizeChange: onContentSizeChange,
-    bindtouchstart: onScrollTouchStart,
-    bindtouchmove: onScrollTouchMove,
-    onScrollEndDrag,
+    bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
+    bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
+    bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+    onScrollBeginDrag: onScrollDrag,
+    onScrollEndDrag: onScrollDrag,
     onMomentumScrollEnd: onScrollEnd,
-    ...layoutProps
+    ...layoutProps,
+    ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
+    ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
   }
   if (enhanced) {
     scrollAdditionalProps = {
@@ -412,7 +455,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       pagingEnabled
     }
   }
+
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    'id',
     'scroll-x',
     'scroll-y',
     'enable-back-to-top',
@@ -449,12 +494,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       {...innerProps}
       refreshControl={refresherEnabled
         ? (
-        <RefreshControl
-          progressBackgroundColor={refresherBackground}
-          refreshing={refreshing}
-          onRefresh={onRefresh}
-          {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
-        />
+          <RefreshControl
+            progressBackgroundColor={refresherBackground}
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}
+          />
           )
         : undefined}
     >
@@ -473,6 +518,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   )
 })
 
-_ScrollView.displayName = 'mpx-scroll-view'
+_ScrollView.displayName = 'MpxScrollView'
 
 export default _ScrollView

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

@@ -488,7 +488,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
         } else if (i === pages.length - 1 && typeof width === 'number') {
           nextMargin && (extraStyle.marginRight = nextMargin)
         }
-        return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>
+        return (<View style={[pageStyle, styles.slide, extraStyle]} key={'page' + i}>
           {wrapChildren(
             {
               children: children[+page]
@@ -520,6 +520,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   </View>)
 })
 
-_Carouse.displayName = '_Carouse'
+_Carouse.displayName = 'MpxCarouse'
 
 export default _Carouse

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

@@ -74,6 +74,7 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     {children}
   </Carouse>
 })
-_SwiperWrapper.displayName = 'mpx-swiper'
+
+_SwiperWrapper.displayName = 'MpxSwiper'
 
 export default _SwiperWrapper

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

@@ -73,6 +73,6 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   )
 })
 
-_SwiperItem.displayName = 'mpx-swiper-item'
+_SwiperItem.displayName = 'MpxSwiperItem'
 
 export default _SwiperItem

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

@@ -4,7 +4,7 @@
  * ✔ disabled
  * ✔ color
  */
-import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
 import { warn } from '@mpxjs/utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
@@ -111,6 +111,14 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     }
   }
 
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
+    }
+  }, [])
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
     style: { ...normalStyle, ...layoutStyle },
@@ -144,6 +152,6 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
   />
 })
 
-_Switch.displayName = 'mpx-switch'
+_Switch.displayName = 'MpxSwitch'
 
 export default _Switch

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

@@ -78,6 +78,6 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
   )
 })
 
-_Text.displayName = 'mpx-text'
+_Text.displayName = 'MpxText'
 
 export default _Text

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

@@ -41,6 +41,6 @@ const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
   }
 )
 
-Textarea.displayName = 'mpx-textarea'
+Textarea.displayName = 'MpxTextarea'
 
 export default Textarea

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

@@ -4,15 +4,15 @@
  * ✔ hover-start-time
  * ✔ hover-stay-time
  */
-import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, ImageResizeMode, StyleSheet, Image, LayoutChangeEvent, Text } from 'react-native'
-import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, Children, cloneElement } from 'react'
+import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native'
+import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
 import Animated from 'react-native-reanimated'
 import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils'
 import LinearGradient from 'react-native-linear-gradient'
 
 export interface _ViewProps extends ViewProps {
@@ -24,6 +24,7 @@ export interface _ViewProps extends ViewProps {
   'hover-stay-time'?: number
   'enable-background'?: boolean
   'enable-var'?: boolean
+  'enable-fast-image'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
@@ -76,9 +77,11 @@ type PreImageInfo = {
 type ImageProps = {
   style: ImageStyle,
   src?: string,
+  source?: {uri: string },
   colors: Array<string>,
   locations?: Array<number>
   angle?: number
+  resizeMode?: 'cover' | 'stretch'
 }
 
 const linearMap = new Map([
@@ -280,13 +283,14 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
       if (!dimensions) return
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
-      (imageProps.style as ImageStyle).resizeMode = 'stretch'
+      imageProps.resizeMode = 'stretch'
       dimensions = {
         width: isPercent(width) ? width : +width,
         height: isPercent(height) ? height : +height
       } as { width: NumberVal, height: NumberVal }
     }
   }
+
   // 样式合并
   imageProps.style = {
     ...imageProps.style as ImageStyle,
@@ -296,8 +300,9 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
 
 // background-image转换为source
 function backgroundImage (imageProps: ImageProps, preImageInfo: PreImageInfo) {
-  if (preImageInfo.src) {
-    imageProps.src = preImageInfo.src
+  const src = preImageInfo.src
+  if (src) {
+    imageProps.source = { uri: src }
   }
 }
 
@@ -326,8 +331,8 @@ function linearGradient (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
 const imageStyleToProps = (preImageInfo: PreImageInfo, imageSize: Size, layoutInfo: Size) => {
   // 初始化
   const imageProps: ImageProps = {
+    resizeMode: 'cover',
     style: {
-      resizeMode: 'cover' as ImageResizeMode,
       position: 'absolute'
       // ...StyleSheet.absoluteFillObject
     },
@@ -533,7 +538,26 @@ function isDiagonalAngle (linearInfo?: LinearInfo): boolean {
   return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction])
 }
 
-function wrapImage (imageStyle?: ExtendedViewStyle) {
+function inheritStyle (innerStyle: ExtendedViewStyle = {}) {
+  const { borderWidth, borderRadius } = innerStyle
+  const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius']
+  return pickStyle(innerStyle,
+    borderStyles,
+    borderWidth && borderRadius
+      ? (key, val) => {
+        // 盒子内圆角borderWith与borderRadius的关系
+        // 当borderRadius 小于 当borderWith 内边框为直角
+        // 当borderRadius 大于等于 当borderWith 内边框为圆角
+          if (borderStyles.includes(key)) {
+            const borderVal = +val - borderWidth
+            return borderVal > 0 ? borderVal : 0
+          }
+          return val
+        }
+      : undefined)
+}
+
+function wrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<string, any>, enableFastImage?: boolean) {
   // 预处理数据
   const preImageInfo: PreImageInfo = preParseImage(imageStyle)
   // 预解析
@@ -616,9 +640,9 @@ function wrapImage (imageStyle?: ExtendedViewStyle) {
     }
   }
 
-  return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+  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' && <Image {...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>
 }
 
@@ -629,9 +653,11 @@ interface WrapChildrenConfig {
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
   textProps?: Record<string, any>
+  innerStyle?: Record<string, any>
+  enableFastImage?: boolean
 }
 
-function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }: WrapChildrenConfig) {
+function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }: WrapChildrenConfig) {
   const children = wrapChildren(props, {
     hasVarDec,
     varContext,
@@ -640,7 +666,7 @@ function wrapWithChildren (props: _ViewProps, { hasVarDec, enableBackground, tex
   })
 
   return [
-    enableBackground ? wrapImage(backgroundStyle) : null,
+    enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
     children
   ]
 }
@@ -655,6 +681,7 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'enable-background': enableBackground,
+    'enable-fast-image': enableFastImage,
     'enable-animation': enableAnimation,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
@@ -755,9 +782,22 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
   const viewStyle = Object.assign({}, innerStyle, layoutStyle)
+
+  enableAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableAnimation)
+  if (enableAnimationRef.current !== enableAnimation) {
+    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+  const finalStyle = enableAnimation
+    ? useAnimationHooks({
+      animation,
+      style: viewStyle
+    })
+    : viewStyle
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef,
-    style: viewStyle,
+    style: finalStyle,
     ...layoutProps,
     ...(hoverStyle && {
       bindtouchstart: onTouchStart,
@@ -772,29 +812,19 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     layoutRef
   })
 
-  enableAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableAnimation)
-  if (enableAnimationRef.current !== enableAnimation) {
-    throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
-  const finalStyle = enableAnimation
-    ? useAnimationHooks({
-      animation,
-      style: viewStyle
-    })
-    : viewStyle
   const childNode = wrapWithChildren(props, {
     hasVarDec,
     enableBackground: enableBackgroundRef.current,
     textStyle,
     backgroundStyle,
     varContext: varContextRef.current,
-    textProps
+    textProps,
+    innerStyle,
+    enableFastImage
   })
-  return animation?.actions?.length
+  return enableAnimation
     ? (<Animated.View
       {...innerProps}
-      style={finalStyle}
     >
       {childNode}
     </Animated.View>)
@@ -805,6 +835,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     </View>)
 })
 
-_View.displayName = 'mpx-view'
+_View.displayName = 'MpxView'
 
 export default _View

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

@@ -1,11 +1,13 @@
-import { forwardRef, JSX, useEffect, useRef } from 'react'
+import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react'
 import { noop, warn } from '@mpxjs/utils'
 import { Portal } from '@ant-design/react-native'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes'
+import { getCurrentPage } from './utils'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview/lib/WebViewTypes'
+import { RouteContext } from './context'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -51,6 +53,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
+  const pageId = useContext(RouteContext)
+  const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
+
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -64,17 +69,23 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     defaultStyle: defaultWebViewStyle
   })
 
-  const _messageList: any[] = []
+  const _messageList = useRef<any[]>([])
   const handleUnload = () => {
     // 这里是 WebView 销毁前执行的逻辑
     bindmessage(getCustomEvent('messsage', {}, {
       detail: {
-        data: _messageList
+        data: _messageList.current
       },
       layoutRef: webViewRef
     }))
   }
 
+  useEffect(() => {
+    if (currentPage) {
+      currentPage.__webViewUrl = src
+    }
+  }, [src, currentPage])
+
   useEffect(() => {
     // 组件卸载时执行
     return () => {
@@ -101,6 +112,11 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     }
     binderror(result)
   }
+  const _changeUrl = function (navState: WebViewNavigation) {
+    if (currentPage) {
+      currentPage.__webViewUrl = navState.url
+    }
+  }
   const _message = function (res: WebViewMessageEvent) {
     let data: MessageData = {}
     let asyncCallback
@@ -116,7 +132,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     const postData: PayloadData = data.payload || {}
     switch (data.type) {
       case 'postMessage':
-        _messageList.push(postData.data)
+        _messageList.current.push(postData.data)
         asyncCallback = Promise.resolve({
           errMsg: 'invokeWebappApi:ok'
         })
@@ -157,11 +173,12 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onLoad={_load}
       onError={_error}
       onMessage={_message}
+      onNavigationStateChange={_changeUrl}
       javaScriptEnabled={true}
     ></WebView>
   </Portal>)
 })
 
-_WebView.displayName = 'mpx-web-view'
+_WebView.displayName = 'MpxWebview'
 
 export default _WebView