@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

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

@@ -1,9 +1,19 @@
 import { View } from 'react-native'
-import { LinearGradient, LinearGradientProps } from 'react-native-linear-gradient'
-import React, { forwardRef, useState, useRef, ReactElement, JSX } from 'react'
+import React, { forwardRef, useState, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import {
+  useLayout,
+  splitProps,
+  splitStyle,
+  wrapChildren,
+  parseInlineStyle,
+  useTransformStyle,
+  useDebounceCallback,
+  useStableCallback,
+  extendObject
+} from './utils'
+import type { AnyFunc } from './types/common'
 /**
  * ✔ value
  * ✔ bindchange
@@ -18,9 +28,10 @@ import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout,
 
 interface PickerViewProps {
   children: React.ReactNode
-  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
+  // 初始的defaultValue数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），
+  // 数字大于 picker-view-column 可选项长度时，选择最后一项。
   value?: Array<number>
-  bindchange?: Function
+  bindchange?: AnyFunc
   style: {
     [key: string]: any
   }
@@ -48,27 +59,29 @@ const styles: { [key: string]: Object } = {
     justifyContent: 'space-around',
     overflow: 'hidden',
     alignItems: 'center'
-  },
-  maskTop: {
-    position: 'absolute',
-    width: 1000,
-    zIndex: 100
-  },
-  maskBottom: {
-    position: 'absolute',
-    width: 1000,
-    zIndex: 100
   }
 }
+
 const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProps>((props: PickerViewProps, ref) => {
-  const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props
+  const {
+    children,
+    value = [],
+    bindchange,
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext
+  } = props
+
   // indicatorStyle 需要转换为rn的style
   // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
-  const { height: indicatorH, width: indicatorW } = indicatorStyle
+  const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle
+  const [pickMaxH, setPickMaxH] = useState(0)
   const nodeRef = useRef(null)
-  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
-  //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+  const cloneRef = useRef(null)
+  const activeValueRef = useRef(value)
+  activeValueRef.current = value.slice()
+
   const {
     normalStyle,
     hasVarDec,
@@ -77,69 +90,91 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle } = splitStyle(normalStyle)
-  const { textProps } = splitProps(props)
+
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
   const {
     // 存储layout布局信息
     layoutRef,
     layoutProps,
     layoutStyle
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
+  const { textProps } = splitProps(props)
+  const { textStyle } = splitStyle(normalStyle)
 
-  const isSetW = indicatorW !== undefined ? 1 : 0
-  const cloneRef = useRef(null)
-  const maskPos: PosType = {}
-  let [pickH, setPickH] = useState(0)
-  const itemH = pickH / 5
-  if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
-    maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2)
-  } else {
-    maskPos.height = itemH * 2
+  const onColumnItemRawHChange = (height: number) => {
+    if (height > pickMaxH) {
+      setPickMaxH(height)
+    }
   }
 
-  const onColumnLayoutChange = (layoutConfig: PickerLayout) => {
-    pickH = layoutConfig.height
-    setPickH(layoutConfig.height)
+  const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300)
+
+  const onSelectChange = (columnIndex: number, selectedIndex: number) => {
+    bindchangeDebounce.clear()
+    const activeValue = activeValueRef.current
+    activeValue[columnIndex] = selectedIndex
+    const eventData = getCustomEvent(
+      'change',
+      {},
+      { detail: { value: activeValue, source: 'change' }, layoutRef }
+    )
+    bindchangeDebounce(eventData)
   }
 
-  const onSelectChange = (columnIndex: number, selIndex: number) => {
-    const changeValue = value.slice()
-    changeValue[columnIndex] = selIndex
-    const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef })
-    bindchange && bindchange(eventData)
+  const onInitialChange = (value: number[]) => {
+    const eventData = getCustomEvent(
+      'change',
+      {},
+      { detail: { value, source: 'change' }, layoutRef }
+    )
+    bindchange?.(eventData) // immediate
   }
 
-  const innerProps = useInnerProps(props, {
-    ref: nodeRef,
-    style: {
-      ...normalStyle,
-      ...layoutStyle,
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    ...layoutProps
-  }, [
-    'enable-offset'
-  ], { layoutRef })
-
-  const cloneChild = (child: React.ReactNode, index: number) => {
-    // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+  const innerProps = useInnerProps(
+    props,
+    extendObject({
+      ref: nodeRef,
+      style: extendObject(
+        {},
+        normalStyle,
+        layoutStyle,
+        {
+          position: 'relative',
+          overflow: 'hidden'
+        }
+      ),
+      layoutProps
+    }),
+    ['enable-offset'],
+    { layoutRef }
+  )
+
+  const renderColumn = (child: React.ReactElement, index: number, columnData: React.ReactNode[], initialIndex: number) => {
     const extraProps = {}
-    const childProps = {
-      ...(child as ReactElement)?.props,
-      ref: cloneRef,
-      prefix: index,
-      key: 'pick-view' + index,
-      wrapperStyle: {
-        height: normalStyle?.height || 0,
-        itemHeight: indicatorH || 0
+    const childProps = child?.props || {}
+    const wrappedProps = extendObject(
+      {},
+      childProps,
+      {
+        columnData,
+        ref: cloneRef,
+        columnIndex: index,
+        key: `pick-view-${index}`,
+        wrapperStyle: {
+          height: normalStyle?.height || 0,
+          itemHeight: indicatorH || 0
+        },
+        onColumnItemRawHChange,
+        onSelectChange: onSelectChange.bind(null, index),
+        initialIndex,
+        pickerOverlayStyle
       },
-      onColumnLayoutChange,
-      onSelectChange: onSelectChange.bind(null, index),
-      selectedIndex: value?.[index] || 0,
-      ...extraProps
-    }
-    const realElement = React.cloneElement(child as ReactElement, childProps)
+      extraProps
+    )
+    const realElement = React.cloneElement(child, wrappedProps)
     return wrapChildren(
       {
         children: realElement
@@ -153,69 +188,44 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     )
   }
 
-  const renderTopMask = () => {
-    const linearProps: LinearGradientProps = {
-      colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
-      style: [
-        styles.maskTop,
-        {
-          height: maskPos.height,
-          top: 0,
-          pointerEvents: 'none'
-        }
-      ]
-    }
-    return (<LinearGradient {...linearProps}/>)
+  const validateChildInitialIndex = (index: number, data: React.ReactNode[]) => {
+    return Math.max(0, Math.min(value[index] || 0, data.length - 1))
   }
 
-  const renderBottomMask = () => {
-    const linearProps: LinearGradientProps = {
-      colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
-      style: [
-        styles.maskBottom,
-        {
-          height: maskPos.height,
-          bottom: 0,
-          pointerEvents: 'none'
-        }
-      ]
+  const flatColumnChildren = (data: React.ReactElement) => {
+    const columnData = React.Children.toArray(data?.props?.children)
+    if (columnData.length === 1 && React.isValidElement(columnData[0]) && columnData[0].type === React.Fragment) {
+      // 只有一个 Fragment 嵌套情况
+      return React.Children.toArray(columnData[0].props.children)
     }
-    return <LinearGradient {...linearProps}></LinearGradient>
+    return columnData
   }
 
-  const renderLine = () => {
-    return <View style={[{
-      position: 'absolute',
-      top: '50%',
-      transform: [{ translateY: -(itemH / 2) }],
-      height: itemH,
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: '#f0f0f0',
-      width: '100%',
-      zIndex: 101
-    }]}></View>
+  const renderPickerColumns = () => {
+    const columns = React.Children.toArray(children)
+    const renderColumns: React.ReactNode[] = []
+    const validValue: number[] = []
+    let isInvalid = false
+    columns.forEach((item: React.ReactElement, index) => {
+      const columnData = flatColumnChildren(item)
+      const validIndex = validateChildInitialIndex(index, columnData)
+      if (validIndex !== value[index]) {
+        isInvalid = true
+      }
+      validValue.push(validIndex)
+      renderColumns.push(renderColumn(item, index, columnData, validIndex))
+    })
+    isInvalid && onInitialChange(validValue)
+    return renderColumns
   }
 
-  const renderSubChild = () => {
-    if (Array.isArray(children)) {
-      return children.map((item, index) => {
-        return cloneChild(item, index)
-      })
-    } else {
-      return cloneChild(children, 0)
-    }
-  }
-  return (<View {...innerProps}>
-    {renderTopMask()}
-    <View style={[styles.wrapper]}>
-      {renderSubChild()}
+  return (
+    <View {...innerProps}>
+      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
     </View>
-    {renderBottomMask()}
-    {!isSetW && renderLine()}
-  </View>)
+  )
 })
 
-_PickerView.displayName = 'mpx-picker-view'
+_PickerView.displayName = 'MpxPickerView'
 
 export default _PickerView

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

@@ -20,7 +20,7 @@ import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { useLayout, useTransformStyle, wrapChildren } from './utils'
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 
 export interface RadioGroupProps {
   name: string
@@ -67,10 +67,7 @@ const radioGroup = forwardRef<
     flexWrap: 'wrap'
   }
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style
-  }
+  const styleObj = extendObject({}, defaultStyle, style)
 
   const {
     hasSelfPercent,
@@ -82,7 +79,7 @@ const radioGroup = forwardRef<
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
-  useNodesRef(props, ref, nodeRef, { defaultStyle })
+  useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
@@ -144,12 +141,14 @@ const radioGroup = forwardRef<
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...normalStyle, ...layoutStyle },
-      ...layoutProps
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+      },
+      layoutProps
+    ),
+    ['name'],
     {
       layoutRef
     }

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

@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import Icon from './mpx-icon'
 
 export interface RadioProps {
@@ -27,7 +27,6 @@ export interface RadioProps {
   'parent-height'?: number;
   children: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
-  catchtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 const styles = StyleSheet.create({
@@ -79,8 +78,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight,
-      bindtap,
-      catchtap
+      bindtap
     } = props
 
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
@@ -91,16 +89,14 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const labelContext = useContext(LabelContext)
 
-    const defaultStyle = {
-      ...styles.wrapper,
-      ...(isChecked && styles.wrapperChecked),
-      ...(disabled && styles.wrapperDisabled)
-    }
+    const defaultStyle = extendObject(
+      {},
+      styles.wrapper,
+      isChecked ? styles.wrapperChecked : {},
+      disabled ? styles.wrapperDisabled : {}
+    )
 
-    const styleObj = {
-      ...styles.container,
-      ...style
-    }
+    const styleObj = extendObject({}, styles.container, style)
 
     const onChange = (evt: NativeSyntheticEvent<TouchEvent>) => {
       if (disabled || isChecked) return
@@ -116,16 +112,10 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     }
 
     const onTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
       bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, props))
       onChange(evt)
     }
 
-    const catchTap = (evt: NativeSyntheticEvent<TouchEvent>) => {
-      if (disabled) return
-      catchtap && catchtap(getCustomEvent('tap', evt, { layoutRef }, props))
-    }
-
     const {
       hasSelfPercent,
       normalStyle,
@@ -135,7 +125,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       setHeight
     } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
     if (backgroundStyle) {
       warn('Radio does not support background image-related styles!')
@@ -143,7 +133,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, {
-      defaultStyle,
+      style: extendObject({}, defaultStyle, normalStyle),
       change: onChange
     })
 
@@ -160,14 +150,21 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
 
     const innerProps = useInnerProps(
       props,
-      {
-        ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
-        ...layoutProps,
-        bindtap: onTap,
-        catchtap: catchTap
-      },
-      [],
+      extendObject(
+        {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
+        },
+        layoutProps,
+        {
+          bindtap: !disabled && onTap
+        }
+      ),
+      [
+        'value',
+        'disabled',
+        'checked'
+      ],
       {
         layoutRef
       }

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

@@ -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, flatGesture, GestureHandler } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
 import { IntersectionObserverContext } from './context'
 
 interface ScrollViewProps {
@@ -176,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,
@@ -298,14 +299,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>) {
@@ -426,34 +426,36 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     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: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
-    bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
-    bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
-    onScrollBeginDrag: onScrollDrag,
-    onScrollEndDrag: onScrollDrag,
-    onMomentumScrollEnd: onScrollEnd,
-    ...layoutProps,
-    ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
-    ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
-  }
+  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, [

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

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

@@ -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,

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

@@ -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布局信息