如何在react-native-swiper-flatlist中获取列表索引？求getCurrentIndex示例

getCurrentIndex 是 react-native-swiper-flatlist 组件实例的方法，必须通过组件引用（ref）才能调用。以下是函数组件和类组件两种场景的使用示例：

函数组件示例 #

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import SwiperFlatList from 'react-native-swiper-flatlist';

const MySwiper = () => {
  // 创建组件引用
  const swiperRef = useRef(null);

  // 封装调用 getCurrentIndex 的逻辑
  const getActiveIndex = () => {
    if (swiperRef.current) {
      const currentIndex = swiperRef.current.getCurrentIndex();
      console.log('当前活跃页面索引:', currentIndex);
      // 可根据需求将索引展示在界面或用于其他业务逻辑
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <SwiperFlatList
        // 将引用绑定到组件
        ref={swiperRef}
        data={[
          { key: '1', content: '第一页' },
          { key: '2', content: '第二页' },
          { key: '3', content: '第三页' },
        ]}
        renderItem={({ item }) => (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 28 }}>{item.content}</Text>
          </View>
        )}
      />
      <Button title="获取当前索引" onPress={getActiveIndex} />
    </View>
  );
};

export default MySwiper;

类组件示例 #

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import SwiperFlatList from 'react-native-swiper-flatlist';

class MySwiper extends Component {
  constructor(props) {
    super(props);
    // 创建组件引用
    this.swiperRef = React.createRef();
  }

  getActiveIndex = () => {
    if (this.swiperRef.current) {
      const currentIndex = this.swiperRef.current.getCurrentIndex();
      console.log('当前活跃页面索引:', currentIndex);
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <SwiperFlatList
          ref={this.swiperRef}
          data={[
            { key: '1', content: '第一页' },
            { key: '2', content: '第二页' },
            { key: '3', content: '第三页' },
          ]}
          renderItem={({ item }) => (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ fontSize: 28 }}>{item.content}</Text>
            </View>
          )}
        />
        <Button title="获取当前索引" onPress={this.getActiveIndex} />
      </View>
    );
  }
}

export default MySwiper;

关键说明 #

• 调用 getCurrentIndex 前必须先判断引用是否存在，避免空指针异常
• 返回值为当前活跃页面的索引，从0开始计数
• 该方法仅能通过组件实例调用，无法直接作为props传递使用

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