React Native Swiper滑动触发自动滚动致双图显示问题求助

问题现象 #

使用React Native Swiper组件时，滑动操作会触发自动滚动，导致两张图片同时显示；但移除onIndexChanged回调后，该异常现象消失。

• 问题效果：滑动时两张图片同时显示的异常状态
• 期望滑动效果：每次滑动仅显示单张图片的正常状态

相关代码 #

<Swiper
      index={0}
      loop={false}
      autoplay={false}
      onIndexChanged={(index) => {
        setCurrentIndex(index)
      }}
      showsPagination={false}
      loadMinimal
      loadMinimalSize={1}
      horizontal={false}
    >
      {[{ id: "cover", image: image }, ...images]
        .filter((item) => item.image)
        .map((item, index) => (
          <Manga
            key={item.id}
            coverImage={item.image}
            img={item.image}
            index={index}
            blurStatus={blurStatus}
            overlayVisible={overlayVisible}
            commentsForImages={commentsForImages}
            refRBSheet={refRBSheet}
          />
        ))}
</Swiper>

测试验证 #

以下代码会触发问题：

onIndexChanged={(index) => {
  setCurrentIndex(index);
}}

仅打印索引则无异常：

onIndexChanged={(index) => {
  console.log(index)
}}

解决方法 #

问题根源 #

在onIndexChanged中调用setCurrentIndex会触发组件重新渲染，Swiper的滑动状态会和重新渲染后的组件状态冲突，进而导致异常滚动。

可行方案 #

1. 绑定index到状态：
   把Swiper的index属性从固定值0改为绑定currentIndex状态，避免重新渲染时强制重置索引：

   <Swiper
     index={currentIndex}
     loop={false}
     autoplay={false}
     onIndexChanged={(index) => {
       setCurrentIndex(index)
     }}
     // 其他属性不变
   >
   

2. 用useRef替代状态存储索引：
   如果不需要索引作为触发重渲染的状态，改用useRef存储，避免不必要的组件更新：

   const currentIndexRef = useRef(0);
   
   // ...
   
   <Swiper
     onIndexChanged={(index) => {
       currentIndexRef.current = index;
     }}
     // 其他属性不变
   >
   

3. 防抖处理状态更新：
   若必须用状态同步索引，给setCurrentIndex加防抖，避免滑动过程中频繁触发更新：

   import { debounce } from 'lodash';
   
   // ...
   
   const handleIndexChange = debounce((index) => {
     setCurrentIndex(index);
   }, 100);
   
   <Swiper
     onIndexChanged={handleIndexChange}
     // 其他属性不变
   >
   

4. 升级/降级组件版本：
   该问题可能是React Native Swiper的版本bug，尝试切换到官方推荐的稳定版本。

内容的提问来源于stack exchange，提问作者Sheriff oladimeji