RESOLVE - 分页react-native-reanimated-carousel和react-native-animated-dots-carousel

Question

我对react-native-reanimated-carousel有一个小问题，我尝试使用react-native-animated-dots-carousel安装分页，但是当我滑动我的轮播时，只有当轮播停止移动时，我的分页才会呈现我的新值。问题是，如果我一次传递三张图像，分页从 1 到 4 没有任何过渡，而且似乎有时间延迟。

我怎么解决这个问题？这是我的轮播代码：

const handleIndex = (index: number) => {
        setIndex(index)
    }
    
<Carousel
 style={{borderRadius: 5}}
 pagingEnabled={true}
 loop={false}
 width={width}
 height={180}
 autoPlay={false}
 data={props.arrayImage}
 panGestureHandlerProps={{
  activeOffsetX: [-10, 10],
 }}
 onSnapToItem={(index) => handleIndex(index)}
 renderItem={({ item, ind }: any) => (
  <View>
   <View>
    <Image
     style={styles.imageFullSize}
     source={{
      uri: item
     }}
    />
   </View>
  </View>
 )}
/>
<View style={{position: 'absolute', bottom: 50, left: 20, width: '100%', height: 25, justifyContent: 'center', alignContent: 'center'}}>
<AnimatedDotsCarousel
 length={props.arrayImage.length}
 currentIndex={index}
 maxIndicators={props.arrayImage.length}
 interpolateOpacityAndColor={false}
 activeIndicatorConfig={{
  color: '#EC3C4C',
  margin: 3,
  opacity: 1,
  size: 8,
 }}
 inactiveIndicatorConfig={{
  color: '#F96B2B',
  margin: 3,
  opacity: 0.5,
  size: 8,
 }}
 decreasingDots={[
  {
   config: { color: '#F96B2B', margin: 3, opacity: 0.5, size: 6 },
   quantity: 1,
  },
  {
   config: { color: '#F96B2B', margin: 3, opacity: 0.5, size: 4 },
   quantity: 1,
  },
 ]}
/>
</View>```

Answer 1

使用 Math.round 和 onProgressChange prop 而不是 onSnapToItem 对我来说是成功的。在你的情况下它应该看起来像这样

<Carousel
  ...
  onProgressChange={(_, absoluteProgress) => {
    handleIndex(Math.round(absoluteProgress));
  }}
/>