如何解决 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 .
请任何人帮助我。
谢谢。
最佳答案
我在设置 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)}
/>
关于react-native - 如何解决 react-native-snap-carousel 中的闪烁图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59064342/