React Native如何动态映射数组实现多任务分页渲染？

1. 先把任务对象转成有序数组 #

你的原始任务是键值对结构，直接遍历对象没法保证顺序，先转成有序数组：

const taskObj = {
  task_1: [/* 子项数据 */],
  task_2: [/* 子项数据 */],
  task_3: [/* 子项数据 */]
};

// 转成[key, value]数组并按task编号排序
const taskList = Object.entries(taskObj).sort((a, b) => {
  const numA = parseInt(a[0].split('_')[1]);
  const numB = parseInt(b[0].split('_')[1]);
  return numA - numB;
});

2. 用状态控制当前显示的任务页 #

用useState存当前页码，动态渲染对应任务的内容：

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

function TaskPager() {
  // 当前页码，从0开始对应第一个任务
  const [currentPage, setCurrentPage] = useState(0);
  const taskObj = { /* 你的任务数据对象 */ };
  const taskList = Object.entries(taskObj).sort((a, b) => {
    const numA = parseInt(a[0].split('_')[1]);
    const numB = parseInt(b[0].split('_')[1]);
    return numA - numB;
  });

  // 获取当前任务的子项数据
  const currentTaskItems = taskList[currentPage][1];

  // 切换下一页
  const nextPage = () => {
    if (currentPage < taskList.length - 1) {
      setCurrentPage(prev => prev + 1);
    }
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      {/* 动态渲染当前任务的所有子项 */}
      <FlatList
        data={currentTaskItems}
        keyExtractor={(item, idx) => idx.toString()}
        renderItem={({ item }) => (
          {/* 这里写你的子项渲染逻辑，比如答题卡片 */}
          <View style={{ padding: 12, borderBottomWidth: 1, borderColor: '#f0f0f0', marginVertical: 8 }}>
            <Text style={{ fontSize: 16 }}>{item.title}</Text>
            {/* 其他子项内容，比如选项、输入框等 */}
          </View>
        )}
      />

      {/* 下一页按钮 */}
      <TouchableOpacity
        style={{
          marginTop: 24,
          backgroundColor: currentPage < taskList.length - 1 ? '#1677ff' : '#d9d9d9',
          padding: 16,
          borderRadius: 8,
          alignItems: 'center'
        }}
        onPress={nextPage}
        disabled={currentPage >= taskList.length - 1}
      >
        <Text style={{ color: '#fff', fontSize: 16 }}>
          {currentPage < taskList.length - 1 ? '下一页' : '全部完成'}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

export default TaskPager;

核心逻辑说明 #

• 有序数组转换：Object.entries把对象拆成键值对数组，再通过提取task编号排序，确保任务按1、2、3的顺序展示。
• 动态渲染：通过currentPage状态拿到当前任务的子项数据，只用一套渲染逻辑就能适配所有任务。
• 分页控制：点击按钮时判断是否还有下一页，更新状态切换任务，按钮会自动根据是否最后一页禁用并改变样式。

要是需要上一页功能，加个prevPage方法就行，逻辑和下一页相反，判断currentPage > 0后更新状态。

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