我创建了一个钩子来捕获react-native-pager-view carousel滚动位置：

import { useEvent, useHandler } from 'react-native-reanimated';

import { AnimatedPagerScrollHookParams } from './animated-pager-scroll.type';

const useAnimatedPagerScroll = (
  handlers: AnimatedPagerScrollHookParams['handlers'],
  dependencies?: AnimatedPagerScrollHookParams['dependencies'],
) => {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    event => {
      'worklet';
      const { onPageScroll } = handlers;

      if (
        onPageScroll &&
        (
          event as {
            eventName: string;
          }
        ).eventName.endsWith('onPageScroll')
      ) {
        onPageScroll(event, context);
      }
    },
    ['onPageScroll'],
    doDependenciesDiffer,
  );
};

export default useAnimatedPagerScroll;

然后，我在PagerView组件中使用它，如下所示：

<AnimatedPagerView
        onPageScroll={handler}
        style={{ flex: 1 }}
        initialPage={0}
      >
        {slides.map((slide, index) => (
          <View
            key={index}
            style={{
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <ImageBackground
              testID="TestID__image-Onboarding"
              source={slide.imageUrl}
              style={{
                width: '100%',
                height: '100%',
                justifyContent: 'flex-end',
              }}
            >
              <LinearGradient
                colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0)']}
                style={{
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 0,
                  height: '50%',
                }}
              />
              <Typography
                testID="TestID__subtitle-Onboarding"
                variant="h1"
                color="alternateBasic"
                style={{
                  marginBottom: 146,
                  marginLeft: 43,
                  width: index === slides.length - 1 ? '45%' : '35%',
                }}
              >
                {slide.subtitle}
              </Typography>
            </ImageBackground>
          </View>
        ))}
      </AnimatedPagerView>

我使用的是一个名为react-native-animated-pagination-dots的库。它根据滚动位置制作动画。它接受一个名为scrollX的属性，该属性必须是Animated.Value类型。我使用的是react-native-reanimated

<ExpandingDot
        data={slides}
        expandingDotWidth={30}
        scrollX={translationY.value}
        inActiveDotOpacity={0.6}
        dotStyle={{
          width: 10,
          height: 10,
          backgroundColor: '#347af0',
          borderRadius: 5,
          marginHorizontal: 5,
        }}
        containerStyle={{
          top: 30,
        }}
      />

如果我传递了一个共享值，我可以理解为它期望Animated.Value，它会抛出一个错误。我可以执行什么转换来继续使用react-native-reanimated，并通过传递正确的prop来满足库的条件？
库列表：

• https://github.com/weahforsage/react-native-animated-pagination-dots
• https://github.com/callstack/react-native-pager-view
• https://docs.swmansion.com/react-native-reanimated/