npm - @mpxjs/webpack-plugin - Versions diffs - 2.9.66 → 2.9.69-beta.0 - Mend

@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (158) hide show

package/lib/runtime/components/react/mpx-rich-text/html.ts ADDED Viewed

@@ -0,0 +1,40 @@
+export const generateHTML = (html: string) => {
+  return `<html><head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">
+    <style>
+      html {
+        -ms-content-zooming: none;
+        -ms-touch-action: pan-x pan-y;
+      }
+      body {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+      }
+      html,body {
+        margin: 0;
+        padding: 0;
+      }
+      * {
+        user-select: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+      }
+    </style>
+  </head>
+  <body><div id="rich-text">${html}</div>
+  <script>
+    function sendHeight() {
+      const dom = document.getElementById('rich-text')
+      window.ReactNativeWebView.postMessage(dom.scrollHeight);
+    }
+    window.onload = sendHeight;
+</script>
+</body
+></html>`
+}

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

@@ -0,0 +1,121 @@
+/**
+ * ✔ nodes
+ */
+import { View, ViewProps, ViewStyle } from 'react-native'
+import { useRef, forwardRef, JSX, useState } from 'react'
+import useInnerProps from '../getInnerListeners'
+import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
+import { useTransformStyle, useLayout } from '../utils'
+import { WebView, WebViewMessageEvent } from 'react-native-webview'
+import { generateHTML } from './html'
+type Node = {
+  type: 'node' | 'text'
+  name?: string
+  attrs?: any
+  children?: Array<Node>
+  text: string
+}
+interface _RichTextProps extends ViewProps {
+  style?: ViewStyle
+  nodes: string | Array<Node>
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+function jsonToHtmlStr (elements: Array<Node>) {
+  let htmlStr = ''
+  for (const element of elements) {
+    if (element.type === 'text') {
+      htmlStr += element.text
+      return htmlStr
+    }
+    const { name, attrs = {}, children = [] } = element
+    let attrStr = ''
+    for (const [key, value] of Object.entries(attrs)) attrStr += ` ${key}="${value}"`
+    let childrenStr = ''
+    for (const child of children) childrenStr += jsonToHtmlStr([child])
+    htmlStr += `<${name}${attrStr}>${childrenStr}</${name}>`
+  }
+  return htmlStr
+}
+const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    nodes,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+  const nodeRef = useRef(null)
+  const [webViewHeight, setWebViewHeight] = useState(0)
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(Object.assign({
+    width: '100%',
+    height: webViewHeight
+  }, style), {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+  const {
+    layoutRef,
+    layoutStyle,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+  useNodesRef<View, _RichTextProps>(props, ref, nodeRef, {
+    layoutRef
+  })
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    style: { ...normalStyle, ...layoutStyle },
+    ...layoutProps
+  }, [], {
+    layoutRef
+  })
+  const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
+  return (
+    <View
+      {...innerProps}
+    >
+      <WebView
+        source={{ html: generateHTML(html) }}
+        onMessage={(event: WebViewMessageEvent) => {
+          setWebViewHeight(+event.nativeEvent.data)
+        }}
+      >
+      </WebView>
+    </View>
+  )
+})
+_RichText.displayName = 'mpx-rich-text'
+export default _RichText

package/lib/runtime/components/react/mpx-root-portal.tsx CHANGED Viewed

@@ -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,12 +16,10 @@ 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 = 'mpx-root-portal'
+_RootPortal.displayName = 'MpxRootPortal'
 export default _RootPortal

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

@@ -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
@@ -33,12 +33,12 @@
  */
 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'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, 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 firstScrollIntoViewChange = useRef<boolean>(false)
   const {
     normalStyle,
     hasVarDec,
@@ -153,10 +176,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-  const { textStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
   const scrollViewRef = useAnimatedRef<ScrollView>()
   useNodesRef(props, ref, scrollViewRef, {
+    style: normalStyle,
     scrollOffset: scrollOptions,
     node: {
       scrollEnabled: scrollX || scrollY,
@@ -166,7 +190,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 +201,46 @@ 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 !== refresherTriggered) {
+      setRefreshing(!!refresherTriggered)
+    }
+  }, [refresherTriggered])
   useEffect(() => {
-    if (refreshing !== props['refresher-triggered']) {
-      setRefreshing(!!props['refresher-triggered'])
+    if (scrollIntoView && __selectRef) {
+      if (!firstScrollIntoViewChange.current) {
+        setTimeout(handleScrollIntoView)
+      } else {
+        handleScrollIntoView()
+      }
     }
-  }, [props['refresher-triggered']])
+    firstScrollIntoViewChange.current = true
+  }, [scrollIntoView])
+  function handleScrollIntoView () {
+    const refs = __selectRef!(`#${scrollIntoView}`, 'node')
+    if (!refs) return
+    const { nodeRef } = refs.getNodeInstance()
+    nodeRef.current?.measureLayout(
+      scrollViewRef.current,
+      (left: number, top:number) => {
+        scrollToOffset(left, top)
+      }
+    )
+  }
   function selectLength (size: { height: number; width: number }) {
     return !scrollX ? size.height : size.width
@@ -260,14 +304,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const visibleLength = selectLength(e.nativeEvent.layoutMeasurement)
     const contentLength = selectLength(e.nativeEvent.contentSize)
     const offset = selectOffset(e.nativeEvent.contentOffset)
-    scrollOptions.current = {
-      ...scrollOptions.current,
+    extendObject(scrollOptions.current, {
       contentLength,
       offset,
       scrollLeft: position.scrollLeft,
       scrollTop: position.scrollTop,
       visibleLength
-    }
+    })
   }
   function onScroll (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -322,6 +365,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 +379,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 +395,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,53 +410,61 @@ 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 })
     }
   }
-  let scrollAdditionalProps: ScrollAdditionalProps = {
-    style: { ...innerStyle, ...layoutStyle },
-    pinchGestureEnabled: false,
-    horizontal: scrollX && !scrollY,
-    scrollEventThrottle: scrollEventThrottle,
-    scrollsToTop: enableBackToTop,
-    showsHorizontalScrollIndicator: scrollX && showScrollbar,
-    showsVerticalScrollIndicator: scrollY && showScrollbar,
-    scrollEnabled: scrollX || scrollY,
-    ref: scrollViewRef,
-    onScroll: onScroll,
-    onContentSizeChange: onContentSizeChange,
-    bindtouchstart: onScrollTouchStart,
-    bindtouchmove: onScrollTouchMove,
-    onScrollEndDrag,
-    onMomentumScrollEnd: onScrollEnd,
-    ...layoutProps
+  function onScrollDrag (e: NativeSyntheticEvent<NativeScrollEvent>) {
+    const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
+    updateScrollOptions(e, { scrollLeft, scrollTop })
   }
+  const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
+    {
+      style: extendObject({}, innerStyle, layoutStyle),
+      pinchGestureEnabled: false,
+      horizontal: scrollX && !scrollY,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: scrollX && showScrollbar,
+      showsVerticalScrollIndicator: scrollY && showScrollbar,
+      scrollEnabled: scrollX || scrollY,
+      ref: scrollViewRef,
+      onScroll: onScroll,
+      onContentSizeChange: onContentSizeChange,
+      bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
+      bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
+      bindtouchend: ((enhanced && binddragend) || bindtouchend) && onScrollTouchEnd,
+      onScrollBeginDrag: onScrollDrag,
+      onScrollEndDrag: onScrollDrag,
+      onMomentumScrollEnd: onScrollEnd
+    },
+    (simultaneousHandlers ? { simultaneousHandlers } : {}),
+    (waitForHandlers ? { waitFor: waitForHandlers } : {}),
+    layoutProps
+  )
   if (enhanced) {
-    scrollAdditionalProps = {
-      ...scrollAdditionalProps,
+    Object.assign(scrollAdditionalProps, {
       bounces,
       pagingEnabled
-    }
+    })
   }
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    'id',
     'scroll-x',
     'scroll-y',
     'enable-back-to-top',
@@ -444,35 +496,29 @@ 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>
+    )
   )
 })
-_ScrollView.displayName = 'mpx-scroll-view'
+_ScrollView.displayName = 'MpxScrollView'
 export default _ScrollView

package/lib/runtime/components/react/mpx-simple-text.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { Text, TextProps } from 'react-native'
+import { JSX, createElement } from 'react'
+import { extendObject } from './utils'
+const _Text2 = (props: TextProps): JSX.Element => {
+  const {
+    allowFontScaling = false
+  } = props
+  return createElement(Text, extendObject({}, props, {
+    allowFontScaling
+  }))
+}
+_Text2.displayName = 'MpxSimpleText'
+export default _Text2

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

@@ -57,7 +57,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
     parentWidth,
     parentHeight
   } = props
-  // 计算transfrom之类的
+  // 计算transform之类的
   const {
     normalStyle,
     hasVarDec,
@@ -92,7 +92,9 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
   const scrollViewRef = useRef<ScrollView & View>(null)
-  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {})
+  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {
+    style: normalStyle
+  })
   const {
     // 存储layout布局信息
     layoutRef,
@@ -488,7 +490,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 +522,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -18,7 +18,6 @@ interface SwiperItemProps {
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
   const {
-    'enable-offset': enableOffset,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     style
@@ -26,7 +25,6 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   const { textProps } = splitProps(props)
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, {})
   const {
     normalStyle,
@@ -37,6 +35,9 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
   const { textStyle, innerStyle } = splitStyle(normalStyle)
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
   const {
     // 存储layout布局信息
@@ -73,6 +74,6 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   )
 })
-_SwiperItem.displayName = 'mpx-swiper-item'
+_SwiperItem.displayName = 'MpxSwiperItem'
 export default _SwiperItem