如何在React Native的FlatList中仅展示单个元素并通过按钮切换下一条

实现方法 #

你不需要调整FlatList的核心渲染逻辑，只要通过状态控制数据源即可，具体实现如下：

• 新增状态变量存储当前展示的元素下标，初始值设为0
• 将FlatList的data属性从全量的WorkoutList替换为仅包含当前下标的单元素数组[WorkoutList[currentIndex]]，这样FlatList每次只会渲染1个元素
• 新增Next按钮，点击时判断当前下标未到列表末尾就将下标自增，完成切换

完整示例代码 #

import { useState } from 'react';
import { View, Text, FlatList, Button, StyleSheet } from 'react-native';

// 你的原始列表数据示例
const WorkoutList = [
  { id: '1', name: 'Mark' },
  { id: '2', name: 'Luke' },
  { id: '3', name: 'Paul' },
];

export default function WorkoutScreen() {
  // 控制当前展示的下标
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    // 未到列表末尾时才允许切换下一条
    if (currentIndex < WorkoutList.length - 1) {
      setCurrentIndex(prevIndex => prevIndex + 1);
    }
    // 如需列表末尾回到开头，可添加 else setCurrentIndex(0)
  };

  return (
    <View style={styles.container}>
      <FlatList
        style={styles.flatList}
        data={[WorkoutList[currentIndex]]}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.card}>
            {/* 注意：此处item.name需要用{}包裹，否则会被识别为纯文本字符串 */}
            <Text>{item.name}</Text>
          </View>
        )}
      />
      <Button 
        title="NEXTBUTTON" 
        onPress={handleNext}
        // 可选：到列表末尾时禁用按钮
        disabled={currentIndex === WorkoutList.length - 1}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  flatList: {
    marginBottom: 20,
  },
  card: {
    padding: 16,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 8,
  }
});

如果不想修改传入的data，也可以在renderItem中判断item的下标和当前下标是否一致，不一致就返回null，但这种方式性能不如直接控制数据源，不推荐。

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