3

返回 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 的信息。

请任何人帮助我。

谢谢。

4

2 回答 2

1

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

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

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

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

然后我们添加了代码，useEffect当轮播项目到达末尾时手动将其移回第一个项目，延迟时间为 3500 毫秒，该延迟也设置为autoplayIntervalprops。

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

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)}
/>
于 2021-12-01T13:43:08.797 回答
0

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

于 2020-06-23T10:33:27.260 回答