分页 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

你能提供一个发生了什么的gif视频吗？

react-native-animated-dots-carousel

没有办法确切知道何时应该执行转换，以正确的方式检测那个时刻取决于你。您需要更快地检测索引变化的事件，例如，如果您使用 FlatList 实现轮播，您可以使用：

scrollEventThrottle

但由于您正在使用

react-native-reanimated-carousel

也许您可以尝试减少

scrollAnimationDuration

或玩弄

onProgressChange

也许那个道具可以满足您的需要。

我也觉得如果你用它会显得闷闷不乐

interpolateOpacityAndColor={false}

在

react-native-animated-dots=carousel

我是

react-native-animated-dots-carousel

的所有者，所以我将不胜感激任何建议！祝你有美好的一天

Answer 2

使用 Math.round 和 onProgressChange 道具而不是 onSnapToItem 对我有用。在你的情况下它应该是这样的

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