@mpxjs/webpack-plugin 2.10.4-beta.9 → 2.10.5-beta.1

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

@@ -147,6 +147,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const yInertialMotion = useSharedValue(false)
   const isFirstTouch = useSharedValue(true)
   const touchEvent = useSharedValue<string>('')
+  const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 })
 
   const MovableAreaLayout = useContext(MovableAreaContext)
 
@@ -214,11 +215,13 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             })
             : newY
         }
-        runOnJS(handleTriggerChange)({
-          x: newX,
-          y: newY,
-          type: 'setData'
-        })
+        if (propsRef.current.bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: newX,
+            y: newY,
+            type: 'setData'
+          })
+        }
       }
     })()
   }, [x, y])
@@ -230,19 +233,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     }
   }, [MovableAreaLayout.height, MovableAreaLayout.width])
 
-  useAnimatedReaction(
-    () => ({
-      offsetX: offsetX.value,
-      offsetY: offsetY.value
-    }),
-    (currentValue: { offsetX: any; offsetY: any }) => {
-      const { offsetX, offsetY } = currentValue
-      runOnJS(handleTriggerChange)({
-        x: offsetX,
-        y: offsetY
-      })
-    })
-
   const getTouchSource = useCallback((offsetX: number, offsetY: number) => {
     const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
       offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1]
@@ -426,6 +416,13 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           runOnJS(triggerStartOnJS)({ e })
         }
       })
+      .onStart(() => {
+        'worklet'
+        initialViewPosition.value = {
+          x: offsetX.value,
+          y: offsetY.value
+        }
+      })
       .onTouchesMove((e: GestureTouchEvent) => {
         'worklet'
         const changedTouches = e.changedTouches[0] || { x: 0, y: 0 }
@@ -435,11 +432,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           isFirstTouch.value = false
         }
         handleTriggerMove(e)
+      })
+      .onUpdate((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
         if (disabled) return
-        const changeX = changedTouches.x - startPosition.value.x
-        const changeY = changedTouches.y - startPosition.value.y
         if (direction === 'horizontal' || direction === 'all') {
-          const newX = offsetX.value + changeX
+          const newX = initialViewPosition.value.x + e.translationX
           if (!outOfBounds) {
             const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value })
             offsetX.value = x
@@ -448,7 +446,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           }
         }
         if (direction === 'vertical' || direction === 'all') {
-          const newY = offsetY.value + changeY
+          const newY = initialViewPosition.value.y + e.translationY
           if (!outOfBounds) {
             const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY })
             offsetY.value = y
@@ -456,6 +454,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             offsetY.value = newY
           }
         }
+        if (propsRef.current.bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: offsetX.value,
+            y: offsetY.value
+          })
+        }
       })
       .onTouchesUp((e: GestureTouchEvent) => {
         'worklet'
@@ -464,31 +468,41 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         if (bindtouchend || catchtouchend) {
           runOnJS(triggerEndOnJS)({ e })
         }
+      })
+      .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        isMoving.value = false
         if (disabled) return
-        if (!inertia) {
+        // 处理没有惯性且超出边界的回弹
+        if (!inertia && outOfBounds) {
           const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value })
-          if (x !== offsetX.value) {
-            offsetX.value = animation
-              ? withSpring(x, {
-                duration: 1500,
-                dampingRatio: 0.8
+          if (x !== offsetX.value || y !== offsetY.value) {
+            if (x !== offsetX.value) {
+              offsetX.value = animation
+                ? withSpring(x, {
+                  duration: 1500,
+                  dampingRatio: 0.8
+                })
+                : x
+            }
+            if (y !== offsetY.value) {
+              offsetY.value = animation
+                ? withSpring(y, {
+                  duration: 1500,
+                  dampingRatio: 0.8
+                })
+                : y
+            }
+            if (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x,
+                y
               })
-              : x
-          }
-          if (y !== offsetY.value) {
-            offsetY.value = animation
-              ? withSpring(y, {
-                duration: 1500,
-                dampingRatio: 0.8
-              })
-              : y
+            }
           }
+          return
         }
-      })
-      .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-        'worklet'
-        isMoving.value = false
-        if (!inertia || disabled || !animation) return
+        // 惯性处理
         if (direction === 'horizontal' || direction === 'all') {
           xInertialMotion.value = true
           offsetX.value = withDecay({
@@ -497,6 +511,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             clamp: draggableXRange.value
           }, () => {
             xInertialMotion.value = false
+            if (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x: offsetX.value,
+                y: offsetY.value
+              })
+            }
           })
         }
         if (direction === 'vertical' || direction === 'all') {
@@ -507,10 +527,23 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             clamp: draggableYRange.value
           }, () => {
             yInertialMotion.value = false
+            if (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x: offsetX.value,
+                y: offsetY.value
+              })
+            }
           })
         }
       })
       .withRef(movableGestureRef)
+
+    if (direction === 'horizontal') {
+      gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
+    } else if (direction === 'vertical') {
+      gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
+    }
+
     if (simultaneousHandlers && simultaneousHandlers.length) {
       gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers)
     }

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useContext, useEffect } from 'react'
+import React, { forwardRef, useRef, useContext, useEffect, createElement } from 'react'
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import PickerSelector from './selector'
@@ -9,7 +9,7 @@ import PickerRegion from './region'
 import { FormContext, FormFieldValue, RouteContext } from '../context'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
-import { extendObject } from '../utils'
+import { extendObject, useLayout } from '../utils'
 import { createPopupManager } from '../mpx-popup'
 import { EventType, LanguageCode, PickerMode, PickerProps } from './type'
 
@@ -127,26 +127,29 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     const buttonText = buttonTextMap[(global.__mpx?.i18n?.locale as LanguageCode) || 'zh-CN']
     const pickerValue = useRef(value)
     pickerValue.current = Array.isArray(value) ? value.slice() : value
-    const innerLayout = useRef({})
-    const nodeRef = useRef(null)
+    const nodeRef = useRef<View>(null)
     const pickerRef = useRef<any>(null)
     const { open, show, hide, remove } = useRef(createPopupManager()).current
 
     useNodesRef<View, PickerProps>(props, ref, nodeRef)
+    const { layoutRef, layoutProps } = useLayout({
+      props,
+      hasSelfPercent: false,
+      nodeRef
+    })
+
     const innerProps = useInnerProps(
       extendObject(
         {},
         props,
         {
           ref: nodeRef
-        }
+        },
+        layoutProps
       ),
       [],
-      { layoutRef: innerLayout }
+      { layoutRef }
     )
-    const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
-      innerLayout.current = layout.current
-    }
 
     useEffect(() => {
       if (range && pickerRef.current && mode === PickerMode.MULTI_SELECTOR) {
@@ -195,7 +198,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       const eventData = getCustomEvent(
         'columnchange',
         {},
-        { detail: { column: columnIndex, value }, layoutRef: innerLayout }
+        { detail: { column: columnIndex, value }, layoutRef }
       )
       props.bindcolumnchange?.(eventData)
     }
@@ -209,7 +212,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       const eventData = getCustomEvent(
         'change',
         {},
-        { detail: { value: pickerValue.current }, layoutRef: innerLayout }
+        { detail: { value: pickerValue.current }, layoutRef }
       )
       bindchange?.(eventData)
       hide()
@@ -220,7 +223,6 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       children,
       bindchange: onChange,
       bindcolumnchange: onColumnChange,
-      getInnerLayout,
       getRange: () => range
     })
 
@@ -269,10 +271,10 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       }
     }, [])
 
-    return (
-      <TouchableWithoutFeedback onPress={show}>
-        {children}
-      </TouchableWithoutFeedback>
+    return createElement(
+      TouchableWithoutFeedback,
+      { onPress: show },
+      createElement(View, innerProps, children)
     )
   }
 )

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import React, { createElement, forwardRef, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import {
@@ -11,6 +11,7 @@ import {
   extendObject
 } from '../utils'
 import { PickerViewStyleContext } from './pickerVIewContext'
+import Portal from '../mpx-portal'
 import type { AnyFunc } from '../types/common'
 /**
  * ✔ value
@@ -86,7 +87,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     varContextRef,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(style, { enableVar, externalVarContext })
 
   useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
@@ -222,13 +224,25 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     return renderColumns
   }
 
-  return (
-    <PickerViewStyleContext.Provider value={textStyle}>
-      <View {...innerProps}>
-        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-      </View>
-    </PickerViewStyleContext.Provider>
+  const finalComponent = createElement(
+    PickerViewStyleContext.Provider,
+    { value: textStyle },
+    createElement(
+      View,
+      innerProps,
+      createElement(
+        View,
+        { style: [styles.wrapper] },
+        renderPickerColumns()
+      )
+    )
   )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _PickerView.displayName = 'MpxPickerView'

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

@@ -1,7 +1,7 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react'
 import { GestureResponderEvent, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from '../utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -209,9 +209,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const onScrollEndDrag = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
     dragging.current = false
-    if (isIOS) {
+    if (!isAndroid) {
       const { y } = e.nativeEvent.contentOffset
-      if (y % itemRawH === 0) {
+      if (y % itemRawH === 0 || (isHarmony && y > snapToOffsets[maxIndex])) {
         onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } })
       } else if (y > 0 && y < snapToOffsets[maxIndex]) {
         timerResetPosition.current = setTimeout(() => {
@@ -302,33 +302,36 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     })
 
   const renderScollView = () => {
-    return (
-      <PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView
-          ref={scrollViewRef}
-          bounces={true}
-          horizontal={false}
-          nestedScrollEnabled={true}
-          removeClippedSubviews={false}
-          showsVerticalScrollIndicator={false}
-          showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
-          {...layoutProps}
-          onTouchEnd={onClickOnceItem}
-          style={[{ width: '100%' }]}
-          decelerationRate="fast"
-          snapToOffsets={snapToOffsets}
-          onScroll={onScroll}
-          onScrollBeginDrag={onScrollBeginDrag}
-          onScrollEndDrag={onScrollEndDrag}
-          onMomentumScrollBegin={onMomentumScrollBegin}
-          onMomentumScrollEnd={onMomentumScrollEnd}
-          onContentSizeChange={onContentSizeChange}
-          contentContainerStyle={contentContainerStyle}
-        >
-          {renderInnerchild()}
-        </Reanimated.ScrollView>
-      </PickerViewColumnAnimationContext.Provider>
+    const innerProps = extendObject({}, layoutProps, {
+      ref: scrollViewRef,
+      bounces: true,
+      horizontal: false,
+      nestedScrollEnabled: true,
+      removeClippedSubviews: false,
+      showsVerticalScrollIndicator: false,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      style: styles.scrollView,
+      decelerationRate: 'fast',
+      snapToOffsets: snapToOffsets,
+      onTouchEnd: onClickOnceItem,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+      onContentSizeChange,
+      contentContainerStyle
+    }) as React.ComponentProps<typeof Reanimated.ScrollView>
+
+    return createElement(
+      PickerViewColumnAnimationContext.Provider,
+      { value: offsetYShared },
+      createElement(
+        Reanimated.ScrollView,
+        innerProps,
+        renderInnerchild()
+      )
     )
   }
 
@@ -356,7 +359,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 })
 
 const styles = StyleSheet.create({
-  wrapper: { display: 'flex', flex: 1 }
+  wrapper: { display: 'flex', flex: 1 },
+  scrollView: { width: '100%' }
 })
 
 _PickerViewColumn.displayName = 'MpxPickerViewColumn'

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

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

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

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

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

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

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

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

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
-import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent } from 'react-native'
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent, useAnimatedValue } from 'react-native'
 import { ScrollViewContext, StickyContext } from './context'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
@@ -54,7 +54,9 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
-  const headerTopAnimated = useRef(new Animated.Value(0)).current
+  const headerTopAnimated = useAnimatedValue(0)
+  // harmony animatedValue 不支持通过 _value 访问
+  const headerTopRef = useRef(0)
 
   useEffect(() => {
     registerStickyHeader({ key: id, updatePosition })
@@ -75,6 +77,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
               duration: 0,
               useNativeDriver: true
             }).start()
+            headerTopRef.current = top
           }
         )
       } else {
@@ -96,7 +99,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
     const listener = scrollOffset.addListener((state: { value: number }) => {
       const currentScrollValue = state.value
-      const newIsStickOnTop = currentScrollValue > (headerTopAnimated as any)._value
+      const newIsStickOnTop = currentScrollValue > headerTopRef.current
       if (newIsStickOnTop !== isStickOnTopRef.current) {
         isStickOnTopRef.current = newIsStickOnTop
         bindstickontopchange(