如何在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}时，我也遇到了同样的问题。

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

我们将Carousel的值保持在一个状态，并创建了一个activeSlide refCarousel的引用。

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

然后我们在useEffect中添加代码，以便在轮播项目到达末尾时手动将其移回第一个轮播项目，延迟为3500毫秒，这也设置为autoplayInterval props。

这样，我们就达到了循环效果。

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

Answer 2

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