React Native中如何处理嵌套数组并按截图设计渲染接口返回数据

前置说明 #

你给出的接口示例中start、end字段的格式存在语法问题，实际接口返回应为字符串格式，例如"start": "12:00"，开发前先确认数据类型避免解析报错。

1. 数据预处理 #

先把原始接口数据转成方便渲染计算的结构：

• 校验personaldata数组非空，避免空数据渲染报错
• 把时间字符串转成分钟数值，方便后续计算时间块的宽度、偏移量
  示例处理代码（JS环境通用）：

const processRawData = (rawData) => {
  return rawData.personaldata.map(person => {
    return {
      name: person.name,
      timeSlots: person.time.map(timeItem => {
        const [startHour, startMin] = timeItem.start.split(':').map(Number)
        const [endHour, endMin] = timeItem.end.split(':').map(Number)
        const startTotalMin = startHour * 60 + startMin
        const endTotalMin = endHour * 60 + endMin
        return {
          ...timeItem,
          startTotalMin,
          endTotalMin,
          duration: endTotalMin - startTotalMin
        }
      })
    }
  })
}
const processedData = processRawData(接口返回的data字段)

2. 页面结构设计 #

这类人员时间展示页面通用结构为两栏布局：

• 左侧固定栏：展示人员姓名
• 右侧时间轴区域：
  • 顶部：时间刻度条，可按需求设置刻度精度（1小时/30分钟都可）
  • 下方：对应每个人员的行区域，渲染时间段色块
• 时间轴可按比例设定，比如1分钟对应1px，全天总宽度为1440px，可根据设计需求调整缩放比例

3. 渲染逻辑实现 #

• 每个人员行设置为相对定位，时间段色块设置为绝对定位
• 色块左侧偏移量 = 开始时间的总分钟数 * 缩放比例
• 色块宽度 = 时间段总时长 * 缩放比例
  示例代码（Vue为例，其他框架逻辑通用）：

<template>
  <div class="time-schedule">
    <!-- 左侧人员栏 -->
    <div class="name-col">
      <div v-for="person in processedData" :key="person.name" class="name-item">
        {{ person.name }}
      </div>
    </div>
    <!-- 右侧时间轴 -->
    <div class="time-axis">
      <!-- 顶部时间刻度部分省略，可按计算好的刻度循环渲染 -->
      <div class="time-content">
        <div v-for="person in processedData" :key="person.name" class="person-row">
          <div 
            v-for="slot in person.timeSlots" 
            :key="`${slot.start}-${slot.end}`"
            class="time-block"
            :style="{ left: slot.startTotalMin + 'px', width: slot.duration + 'px' }"
          >
            {{ slot.start }} - {{ slot.end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.time-schedule {
  display: flex;
  border: 1px solid #eee;
}
.name-col {
  width: 100px;
  border-right: 1px solid #eee;
}
.name-item {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
}
.time-axis {
  flex: 1;
  overflow-x: auto;
}
.person-row {
  position: relative;
  height: 48px;
  border-bottom: 1px solid #eee;
}
.time-block {
  position: absolute;
  top: 4px;
  height: 40px;
  background: #409eff;
  border-radius: 4px;
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
</style>

4. 边界情况处理 #

• 跨天时间段：如果结束时间的分钟数小于开始时间，说明是跨天时段，拆成两个时段渲染：当天开始时间到24:00、次日00:00到结束时间
• 重叠时段：如果同一个人有重叠的时间段，可调整重叠色块的高度、透明度或者做上下偏移，避免互相遮挡
• 空数据兜底：如果personaldata为空或者某个人没有时间段，对应行展示空白占位或者暂无数据提示

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