@mpxjs/webpack-plugin 2.9.64 → 2.9.66

package/lib/runtime/components/react/mpx-movable-area.tsx

@@ -3,7 +3,7 @@
  */
 
 import { View, LayoutChangeEvent } from 'react-native'
-import { JSX, useState, useEffect, forwardRef, ReactNode } from 'react'
+import { JSX, useState, useEffect, forwardRef, ReactNode, useRef } from 'react'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
@@ -41,7 +41,8 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef: movableViewRef } = useNodesRef(props, ref)
+  const movableViewRef = useRef(null)
+  useNodesRef(props, ref, movableViewRef)
 
   const onLayout = (e: LayoutChangeEvent) => {
     const { width = 10, height = 10 } = e.nativeEvent.layout

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

@@ -84,7 +84,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     y: Number(y)
   })
 
-  const { nodeRef } = useNodesRef(props, ref, {
+  const nodeRef = useRef<View>(null)
+  useNodesRef(props, ref, nodeRef, {
     defaultStyle: styles.container
   })
 

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

@@ -31,7 +31,8 @@ const _DatePicker = forwardRef<HandlerRef<View, DateProps>, DateProps>((props: D
   const [datevalue, setDateValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, DateProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, DateProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

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

@@ -34,7 +34,8 @@ import { FormContext, FormFieldValue } from '../context'
 const _Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>((props: PickerProps, ref): React.JSX.Element => {
   const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props
   const innerLayout = useRef({})
-  const { nodeRef } = useNodesRef<View, PickerProps>(props, ref, {
+  const nodeRef = useRef(null)
+  useNodesRef<View, PickerProps>(props, ref, nodeRef, {
   })
   const innerProps = useInnerProps(props, {
     ref: nodeRef

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

@@ -89,7 +89,8 @@ const _MultiSelectorPicker = forwardRef<HandlerRef<View, MultiSelectorProps>, Mu
   const [data, setData] = useState(formatRange || [])
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, MultiSelectorProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, MultiSelectorProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

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

@@ -44,7 +44,8 @@ const _RegionPicker = forwardRef<HandlerRef<View, RegionProps>, RegionProps>((pr
   const [regionvalue, setRegionValue] = useState(value)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, RegionProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, RegionProps>(props, ref, viewRef, {
   })
 
   const onChange = (value: string[]): void => {

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

@@ -31,7 +31,8 @@ const _SelectorPicker = forwardRef<HandlerRef<View, SelectorProps>, SelectorProp
   const [data, setData] = useState(formatRange || [])
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, SelectorProps>(props, ref, {
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, SelectorProps>(props, ref, viewRef, {
   })
 
   useEffect(() => {

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

@@ -134,10 +134,12 @@ const _TimePicker = forwardRef<HandlerRef<View, TimeProps>, TimeProps>((props: T
   const [timevalue, setTimeValue] = useState(defaultValue)
   // 存储layout布局信息
   const layoutRef = useRef({})
-  const { nodeRef: viewRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  const viewRef = useRef<View>(null)
+  useNodesRef<View, TimeProps>(props, ref, viewRef, {})
   // 存储modal的布局信息
   const modalLayoutRef = useRef({})
-  const { nodeRef: modalRef } = useNodesRef<View, TimeProps>(props, ref, {})
+  const modalRef = useRef<View>(null)
+  useNodesRef<View, TimeProps>(props, ref, modalRef, {})
   const [visible, setVisible] = useState(false)
   const columnData = generateColumns()
   const [data, setData] = useState(columnData)

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

@@ -1,6 +1,6 @@
 
 import { View, Animated, SafeAreaView, NativeScrollEvent, NativeSyntheticEvent, LayoutChangeEvent, ScrollView } from 'react-native'
-import React, { forwardRef, useState, useEffect, ReactElement, ReactNode } from 'react'
+import React, { forwardRef, useRef, useState, useEffect, ReactElement, ReactNode } from 'react'
 import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
 interface ColumnProps {
@@ -38,7 +38,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   const { textProps } = splitProps(props)
   // const { innerStyle } = splitStyle(normalStyle)
   // scrollView的ref
-  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {})
+  const scrollViewRef = useRef<ScrollView>(null)
+  useNodesRef(props, ref, scrollViewRef, {})
   // 每个元素的高度
   let [itemH, setItemH] = useState(0)
 

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

@@ -66,7 +66,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
   const indicatorStyle = parseInlineStyle(props['indicator-style'])
   const { height: indicatorH, width: indicatorW } = indicatorStyle
-  const { nodeRef } = useNodesRef<View, PickerViewProps>(props, ref, {})
+  const nodeRef = useRef(null)
+  useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {})
   //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
   const {
     normalStyle,

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

@@ -65,7 +65,8 @@ const radioGroup = forwardRef<
     setHeight
   } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { nodeRef } = useNodesRef(props, ref, { defaultStyle })
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, { defaultStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 

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

@@ -4,7 +4,7 @@
  * ✔ checked
  * ✔ color
  */
-import { JSX, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
+import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react'
 import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { LabelContext, RadioGroupContext } from './context'
@@ -141,7 +141,8 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       warn('Radio does not support background image-related styles!')
     }
 
-    const { nodeRef } = useNodesRef(props, ref, {
+    const nodeRef = useRef(null)
+    useNodesRef(props, ref, nodeRef, {
       defaultStyle,
       change: onChange
     })

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

@@ -33,11 +33,13 @@
  */
 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 } from 'react'
+import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } 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 { IntersectionObserverContext } from './context'
 
 interface ScrollViewProps {
   children?: ReactNode;
@@ -59,6 +61,7 @@ interface ScrollViewProps {
   'scroll-top'?: number;
   'scroll-left'?: number;
   'enable-offset'?: boolean;
+  'enable-trigger-intersection-observer'?: boolean;
   'enable-var'?: boolean;
   'external-var-context'?: Record<string, any>;
   'parent-font-size'?: number;
@@ -106,6 +109,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'scroll-x': scrollX = false,
     'scroll-y': scrollY = false,
     'enable-back-to-top': enableBackToTop = false,
+    'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false,
     'paging-enabled': pagingEnabled = false,
     'upper-threshold': upperThreshold = 50,
     'lower-threshold': lowerThreshold = 50,
@@ -138,6 +142,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const hasCallScrollToUpper = useRef(true)
   const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const intersectionObservers = useContext(IntersectionObserverContext)
 
   const {
     normalStyle,
@@ -150,7 +155,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { textStyle, innerStyle } = splitStyle(normalStyle)
 
-  const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+  const scrollViewRef = useAnimatedRef<ScrollView>()
+  useNodesRef(props, ref, scrollViewRef, {
     scrollOffset: scrollOptions,
     node: {
       scrollEnabled: scrollX || scrollY,
@@ -283,6 +289,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         }, props)
       )
     updateScrollOptions(e, { scrollLeft, scrollTop })
+    if (enableTriggerIntersectionObserver && intersectionObservers) {
+      for (const key in intersectionObservers) {
+        intersectionObservers[key].throttleMeasure()
+      }
+    }
   }
 
   function onScrollEnd (e: NativeSyntheticEvent<NativeScrollEvent>) {
@@ -405,6 +416,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'scroll-x',
     'scroll-y',
     'enable-back-to-top',
+    'enable-trigger-intersection-observer',
     'paging-enabled',
     'show-scrollbar',
     'upper-threshold',

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

@@ -87,9 +87,12 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
   const defaultX = (defaultWidth * initOffsetIndex) || 0
   const defaultY = (defaultHeight * initOffsetIndex) || 0
+  // 主动scorllTo时是否要出发onScrollEnd
+  const needTriggerScrollEnd = useRef(true)
   // 内部存储上一次的offset值
   const autoplayTimerRef = useRef<ReturnType <typeof setTimeout> | null>(null)
-  const { nodeRef: scrollViewRef } = useNodesRef<ScrollView & View, CarouseProps>(props, ref, {})
+  const scrollViewRef = useRef<ScrollView & View>(null)
+  useNodesRef<ScrollView & View, CarouseProps>(props, ref, scrollViewRef, {})
   const {
     // 存储layout布局信息
     layoutRef,
@@ -99,22 +102,21 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   // 内部存储上一次的偏移量
   const internalsRef = useRef({
     offset: {
-      x: defaultX || 0,
-      y: defaultY || 0
+      x: 0,
+      y: 0
     },
     isScrolling: false
   })
   const isDragRef = useRef(false)
   const [state, setState] = useState({
-    children: newChild,
     width: dir === 'x' && typeof defaultWidth === 'number' ? defaultWidth - previousMargin - nextMargin : defaultWidth,
     height: dir === 'y' && typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight,
     // 真正的游标索引, 从0开始
     index: initIndex,
     total: totalElements,
     offset: {
-      x: dir === 'x' ? defaultX : 0,
-      y: dir === 'y' ? defaultY : 0
+      x: 0,
+      y: 0
     },
     dir
   } as CarouseState)
@@ -137,25 +139,38 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
 
   useEffect(() => {
     // 确认这个是变化的props变化的时候才执行，还是初始化的时候就执行
-    if (!props.autoplay && props.current !== state.index) {
+    if (!props.autoplay && props.current !== undefined && props.current !== state.index) {
       const initIndex = props.current || 0
       // 这里要排除超过元素个数的设置
-      const initOffsetIndex = initIndex + (props.circular && totalElements > 1 ? 1 : 0)
-      const defaultX = (defaultWidth * initOffsetIndex) || 0
-      const offset = {
-        x: dir === 'x' ? defaultX : 0,
-        y: dir === 'y' ? defaultY : 0
+      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
+      // 1. 安卓需要主动更新下内部状态, 2. IOS不能触发完wcrollTo之后立即updateState, 会造成滑动两次
+      // 2. setTimeout 是fix 当再渲染过程中触发scrollTo失败的问题
+      if (Platform.OS === 'ios') {
+        needTriggerScrollEnd.current = false
+        setTimeout(() => {
+          scrollViewRef.current?.scrollTo({
+            ...nextOffset,
+            animated: true
+          })
+        }, 50)
+      } else {
+        updateState(nextIndex, nextOffset)
       }
-      state.offset = offset
-      internalsRef.current.offset = offset
-      setState((preState) => {
-        return {
-          ...preState,
-          offset
-        }
-      })
     }
-  }, [props.current])
+  }, [props.current, state.width, state.height])
+
+  function getMultiNextConfig (target: number) {
+    const step = state.dir === 'x' ? state.width : state.height
+    const targetPos = step * props.current
+    const targetOffset = {
+      x: dir === 'x' ? targetPos : 0,
+      y: dir === 'y' ? targetPos : 0
+    }
+    return {
+      nextIndex: target,
+      nextOffset: targetOffset
+    }
+  }
   /**
    * @desc: 更新状态: index和offset, 并响应索引变化的事件
    * scrollViewOffset: 移动到的目标位置
@@ -207,7 +222,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
       nextIndex = isBack ? nextIndex - 2 : nextIndex
     }
     if (!props.circular) {
-      // nextIndex = isBack ? nextIndex - 2 : nextIndex
       nextOffset = Object.assign({}, currentOffset, { [state.dir]: step * nextIndex })
     } else {
       if (isBack) {
@@ -253,13 +267,12 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
       createAutoPlay()
       return
     }
-    if (!Array.isArray(state.children)) {
+    if (!Array.isArray(props.children)) {
       return
     }
     const step = state.dir === 'x' ? state.width : state.height
     const { nextOffset, autoMoveOffset, isAutoEnd } = getNextConfig(state.offset)
     // 这里可以scroll到下一个元素, 但是把scrollView的偏移量在设置为content,视觉效果就没了吧
-    // scrollViewRef.current?.scrollTo({ x: nextOffset['x'], y: nextOffset['y'], animated: true })
     if (Platform.OS === 'ios') {
       if (!isAutoEnd) {
         scrollViewRef.current?.scrollTo({ x: nextOffset.x, y: nextOffset.y, animated: true })
@@ -285,7 +298,6 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
         // 安卓无法实现视觉的无缝连接, 只能回到真正的位置, 且安卓调用scrollTo不能触发onMomentumScrollEnd,还未找到为啥
         if (state.dir === 'x') {
           scrollViewRef.current?.scrollTo({ x: step, y: step, animated: true })
-          // scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: autoMoveOffset.y, animated: true })
         } else {
           scrollViewRef.current?.scrollTo({ x: autoMoveOffset.x, y: step, animated: true })
         }
@@ -303,9 +315,15 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
 
   /**
    * 当用户开始拖动结束
+   * 注意: 当手动调用scrollTo的时候, 安卓不会触发onMomentumScrollEnd, IOS会触发onMomentumScrollEnd
    */
   function onScrollEnd (event: NativeSyntheticEvent<NativeScrollEvent>) {
-    // 这里安卓好像没有触发onScrollEnd, 调用scrollTo的时候
+    if (Platform.OS === 'ios' && !needTriggerScrollEnd.current) {
+      const { nextIndex, nextOffset } = getMultiNextConfig(props.current)
+      updateState(nextIndex, nextOffset)
+      needTriggerScrollEnd.current = true
+      return
+    }
     if (totalElements === 1) {
       return
     }
@@ -333,57 +351,41 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
    * @desc: 水平方向时，获取元素的布局，更新, 其中如果传递100%时需要依赖measure计算元算的宽高
   */
   function onWrapperLayout (e: LayoutChangeEvent) {
-    if (hasSelfPercent) {
-      const { width, height } = e?.nativeEvent?.layout || {}
-      setWidth(width || 0)
-      setHeight(height || 0)
-    }
-    if (props.enableOffset) {
-      scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-        layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-        const isWDiff = state.width !== width
-        const isHDiff = state.height !== height
-        if (isWDiff || isHDiff) {
-          const changeState = {
-            width: isWDiff ? width : state.width,
-            height: isHDiff ? height : state.height
-          }
-          const attr = state.dir === 'x' ? 'width' : 'height'
-          changeState[attr] = changeState[attr] - previousMargin - nextMargin
-          const correctOffset = Object.assign({}, state.offset, {
-            [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
-          })
-          state.offset = correctOffset
-          state.width = changeState.width
-          state.height = changeState.height
-          setState((preState) => {
-            return {
-              ...preState,
-              offset: correctOffset,
-              width: changeState.width,
-              height: changeState.height
-            }
-          })
-          scrollViewRef.current?.scrollTo({ x: correctOffset.x, y: correctOffset.y, animated: false })
+    scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
+      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
+      const isWDiff = state.width !== width
+      const isHDiff = state.height !== height
+      if (isWDiff || isHDiff) {
+        const changeState = {
+          width: isWDiff ? width : state.width,
+          height: isHDiff ? height : state.height
         }
-        props.getInnerLayout && props.getInnerLayout(layoutRef)
-      })
-    }
+        const attr = state.dir === 'x' ? 'width' : 'height'
+        changeState[attr] = changeState[attr] - previousMargin - nextMargin
+        const correctOffset = Object.assign({}, state.offset, {
+          [state.dir]: initOffsetIndex * (state.dir === 'x' ? changeState.width : changeState.height)
+        })
+        state.width = changeState.width
+        state.height = changeState.height
+        // 这里setState之后,会再触发重新渲染, renderScrollView会再次触发onScrollEnd,
+        setState((preState) => {
+          return {
+            ...preState,
+            width: changeState.width,
+            height: changeState.height
+          }
+        })
+      }
+      props.getInnerLayout && props.getInnerLayout(layoutRef)
+    })
   }
 
   function getOffset (): Array<number> {
     const step = state.dir === 'x' ? state.width : state.height
     if (!step || Number.isNaN(+step)) return []
     const offsetArray = []
-    if (previousMargin) {
-      offsetArray.push(0)
-      for (let i = 1; i < totalElements; i++) {
-        offsetArray.push(i * step - previousMargin)
-      }
-    } else {
-      for (let i = 0; i < totalElements; i++) {
-        offsetArray.push(i * step)
-      }
+    for (let i = 0; i < totalElements; i++) {
+      offsetArray.push(i * step)
     }
     return offsetArray
   }
@@ -393,7 +395,7 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
     const scrollElementProps = {
       ref: scrollViewRef,
       horizontal: props.horizontal,
-      pagingEnabled: false,
+      pagingEnabled: true,
       snapToOffsets: offsetsArray,
       decelerationRate: 0.99, // 'fast'
       showsHorizontalScrollIndicator: false,
@@ -460,20 +462,21 @@ const _Carouse = forwardRef<HandlerRef<ScrollView & View, CarouseProps>, Carouse
   }
 
   function renderPages () {
-    const { width, height, total, children } = state
+    const { width, height } = state
+    const { children } = props
     const { circular } = props
     const pageStyle = { width: width, height: height }
     // 设置了previousMargin或者nextMargin,
     // 1. 元素的宽度是减去这两个数目之和
     // 2. previousMargin设置marginLeft正值, nextmargin设置marginRight负值
     // 3. 第一个元素设置previousMargin 和 nextMargin, 最后一个元素
-    if (total > 1 && Array.isArray(children)) {
+    if (totalElements > 1 && Array.isArray(children)) {
       let arrElements: (Array<ReactNode>) = []
       // pages = ["2", "0", "1", "2", "0"]
       const pages = Array.isArray(children) ? Object.keys(children) : []
       /* 无限循环的时候 */
       if (circular) {
-        pages.unshift(total - 1 + '')
+        pages.unshift(totalElements - 1 + '')
         pages.push('0')
       }
       arrElements = pages.map((page, i) => {
@@ -485,7 +488,6 @@ 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}>{children[+page]}</View>)
         return (<View style={[pageStyle, styles.slide, extraStyle]} key={ 'page' + i}>
           {wrapChildren(
             {

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

@@ -45,7 +45,10 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     bindchange: props.bindchange,
     easingFunction: props['easing-function'] || 'default'
   }
-  const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {})
+
+  const nodeRef = useRef(null)
+  useNodesRef<ScrollView, SwiperProps>(props, ref, nodeRef, {})
+
   const innerProps = useInnerProps(props, {
     ref: nodeRef
   }, [

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

@@ -25,7 +25,8 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
   } = props
 
   const { textProps } = splitProps(props)
-  const { nodeRef } = useNodesRef(props, ref, {})
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {})
 
   const {
     normalStyle,

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

@@ -76,7 +76,8 @@ const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((prop
     setIsChecked(checked)
   }, [checked])
 
-  const { nodeRef } = useNodesRef<Switch, _SwitchProps>(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef<Switch, _SwitchProps>(props, ref, nodeRef)
 
   const {
     layoutRef,

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

@@ -48,7 +48,8 @@ const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref):
     parentHeight
   })
 
-  const { nodeRef } = useNodesRef<Text, _TextProps>(props, ref)
+  const nodeRef = useRef(null)
+  useNodesRef<Text, _TextProps>(props, ref, nodeRef)
 
   const innerProps = useInnerProps(props, {
     ref: nodeRef,