如何为 react-native-carousel 制作自定义点

Question

我必须为轮播创建分页点，如下所示： 活动点应为渐变色，非活动点应为灰色

当用户开始滑动时，当前活动点从白色过渡到灰色。我在处理这部分时遇到问题。

到目前为止我尝试过的是：

const renderCarouselDots = () => {
return (
   <View style={styles.dotsView}>
    <FlatList
      style={{alignSelf: 'center'}}
      horizontal
      data={carouselData}
      renderItem={({item, index}) =>
        activeSlide === index ? (
          isSliderSwiping ? (
            <View style={[styles.carouselDot, {backgroundColor: "white"}]}></View>
          ) : (
            <GradientBackground style={styles.carouselDot} />
          )
        ) : (
          <View
            style={[styles.carouselDot, styles.inactiveCarouselDot]}></View>
        )
      }
    />
  </View>
);};

旋转木马的代码是：

 <Carousel
        // onScroll={() => console.log("scroll start")}
        renderItem={renderCarouselItem}
        data={carouselData}
        sliderWidth={getScreenWidthHeight().width}
        itemWidth={getScreenWidthHeight().width}
        onBeforeSnapToItem={(i) => setIsSwiping(true)}
        onSnapToItem={(index) => {
          setActiveSlide(index);
          setIsSwiping(false);
          console.log(index);
        }}
        // onScrollBeginDrag={(e) => console.log(e)}
        // autoplay
      />
      {renderCarouselDots()}

到目前为止我取得了什么... 和

我知道如何在颜色之间设置动画。但我不确定如何知道用户何时开始滑动，我尝试使用 onBeforeSnapToItem 属性，这样我就可以将圆点变成幻灯片上的白色视图，但这会在滑动开始后触发。

我想知道如何在渐变到白点和灰点之间实现这个动画，以及什么时候调用这个动画。任何帮助将不胜感激！

Answer 1

尝试以下代码

onItemSwipe = ({ nativeEvent }) => {
  // below variable will give active index of the item that is visible
  const _activeSlide = Math.floor(parseInt(nativeEvent.contentOffset.x) / parseInt(nativeEvent.layoutMeasurement.width));


  // as it is onMomentumScrollEnd this activeSlide will only change on complete scroll change
  this.setState({
    activeSlide_: _activeSlide,
  });
};

<FlatList {...otherProps} onMomentumScrollEnd={this.onItemSwipe} />

Answer 2

在这个图书馆试一试

https://github.com/felire/react-native-animated-dots-carousel

。我觉得它能满足你的需求