如何在react-native-swiper中获取当前页面索引以解决安卓端图片消失问题

react-native-swiper 原生提供了onIndexChanged回调属性，会在滑块切换完成后返回当前激活滑块的索引值，你可以直接绑定该属性配合状态管理实现透明度控制，完整实现逻辑如下：

• 首先在组件内声明状态存储当前索引，初始值默认为首个滑块的索引 0：
  const [currentIndex, setCurrentIndex] = useState(0)
• 给 Swiper 组件绑定onIndexChanged回调，接收返回的索引值更新状态
• 编写透明度判断逻辑，当前索引匹配对应滑块时返回不透明，否则返回透明即可解决安卓端重叠图片异常消失的问题

完整示例代码：

import Swiper from 'react-native-swiper';
import { useState } from 'react';
import { Image, View } from 'react-native';

const CustomSwiper = () => {
  // 存储当前激活滑块索引
  const [currentIndex, setCurrentIndex] = useState(0);

  // 控制对应滑块内图片透明度
  const getImgOpacity = (index) => currentIndex === index ? 1 : 0;

  return (
    <Swiper
      onIndexChanged={(index) => setCurrentIndex(index)}
      // 保留你原有Swiper的其他配置项，比如loop、autoplay等
    >
      {/* 第一个滑块 */}
      <View>
        <Image
          source={require('./你的粉色图片路径.png')}
          style={{
            opacity: getImgOpacity(0),
            // 保留你原有图片的样式配置
          }}
        />
        {/* 滑块1其他内容 */}
      </View>
      {/* 第二个滑块 */}
      <View>
        <Image
          source={require('./你的粉色图片路径.png')}
          style={{
            opacity: getImgOpacity(1),
            // 保留你原有图片的样式配置
          }}
        />
        {/* 滑块2其他内容 */}
      </View>
    </Swiper>
  )
}

额外适配提示：如果调整透明度后安卓端还是偶发图片消失问题，可以给图片外层的 View 加上removeClippedSubviews={false}属性，避免安卓默认裁剪超出父容器的内容，大部分同类渲染异常都可以通过该配置解决。

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