如何为react原生旋转木马制作自定义点

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} />