react-native - 如何解决 react-native-snap-carousel 中的闪烁图像？

Question

如何解决 react-native-snap-carousel 返回第一项时的闪烁图像？我尝试寻找许多示例，但都失败了。

这是我的脚本:

renderSlider ({item, index}) {
    return (
          <View style={styles.slide}>
            <Image source={{uri: item.cover}} style={styles.imageSlider} />
          </View>
    );
}

<Carousel
    ref={(c) => { this._slider1Ref = c; }}
    data={data}
    renderItem={this.renderSlider}
    sliderWidth={width}
    itemWidth={(width - 30)}
    itemWidth={(width - 30)}
    inactiveSlideScale={0.96}
    inactiveSlideOpacity={1}
    firstItem={0}
    enableMomentum={false}
    lockScrollWhileSnapping={false}
    loop={true}
    loopClonesPerSide={100}
    autoplay={true}
    activeSlideOffset={50}
/>

您可以找到的完整文档 here关于插件 api，你可以找到 here .

请任何人帮助我。

谢谢。

Answer 1

我在设置 loop={true} 时遇到了同样的问题。

我们想出了这个解决方法:

我们在状态中维护了 activeSlide 值，并创建了 Carousel 的引用 refCarousel。

const [activeSlide, setActiveSlide] = useState(0);
const refCarousel = useRef();

然后我们在 useEffect 中添加代码，当轮播项目到达终点时手动将轮播项目移回第一个，延迟 3500 毫秒，这也设置为 autoplayInterval Prop 。

这样我们就实现了循环的效果。

useEffect(() => {
    if (activeSlide === data.length - 1) {
        setTimeout(() => {
            refCarousel.current.snapToItem(0);
        }, 3500)
    }
}, [activeSlide]);

下面是Carousel 组件声明。此处仅显示相关 Prop 。

<Carousel
    ref={refCarousel}
    ...
    //loop={true}
    autoplay={true}
    autoplayDelay={500}
    autoplayInterval={3500}
    onSnapToItem={(index) => setActiveSlide(index)}
/>