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

【问题标题】：How to solve blink image in react-native-snap-carousel?如何解决 react-native-snap-carousel 中的闪烁图像？
【发布时间】：2020-03-22 15:55:52
【问题描述】：

返回 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。

请任何人帮助我。

谢谢。

【问题讨论】：

标签： react-native react-native-snap-carousel

【解决方案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)}
/>

【讨论】：

【解决方案2】：

如果您面临眨眼问题，请使用 React Native Fast Image。

【讨论】：