如何解决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}
/>

你可以在这里找到完整的文档，并且关于插件API的信息可以在这里找到。

请帮我一下，谢谢。

- Frank Andrew

Answer 1

当设置loop={true}时，我遇到了相同的问题。

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

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

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

然后我们在useEffect中添加了代码，当轮播图到达结尾时，手动将其移动到第一个，并延迟3500毫秒 (与autoplayInterval属性相同)，从而实现了循环效果。

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

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

以下是Carousel组件声明。此处仅显示相关属性。

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

- MMH

Answer 2

如果你遇到闪烁问题，请使用 React Native Fast Image。

- Avinash