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

【问题标题】：how to make custom dots for react-native-carousel如何为 react-native-carousel 制作自定义点
【发布时间】：2021-03-27 18:01:37
【问题描述】：

我必须为轮播创建分页点，如下所示：活动点应为渐变色，非活动点应为灰色 here is active dot's design

当用户开始滑动时，当前活动点从白色变为灰色。我在这部分工作时遇到问题。 design for dots when sliding starts

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

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()}

到目前为止我所取得的成就...... dots when there is no sliding etc. 和 dots sometime after sliding starts

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

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

【问题讨论】：

标签： react-native pagination carousel react-native-flatlist react-animated

【解决方案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} />

【讨论】：