Javascript 反应本机：将平面列表自定义为时间线

我正在使用react native flatlist为我的项目创建一个时间线

我想做的是检查

flatlist data

是否具有相同的

date

，如果是，则

将flatlist

date

放在一行中。像这样：


我的平面列表数据如下所示：

const list = [
  {
    name: 'Sunny',
    avatar_url: '../Components/Assets/pic1.png',
    time:'Monday 16',
  },
  {
    name: 'Kaya',
    avatar_url: '../Components/Assets/pic2.png',
    time:'Monday 16',
  },
  {
    name: 'Kiki',
    avatar_url: '../Components/Assets/pic3.png',
    time:'Tuesday 21',
  },
 ...
]

如果平面列表中的
时间数据
是相同的，是否有一种方法可以
合并数据
并像照片一样显示一次？此外，还可以自定义边框线的样式

任何建议或意见都会非常有用（提前谢谢！）

已编辑

@维托索里索
这是我的
renderItem代码

renderItem = ({ item, index }) => {
  return (
    <ListItem
      attachToPreviousItem={index > 0 && list[index].time === list[index - 1].time ? true : false}
      containerStyle={styles.cardStyle}
      title={<View><Text>{item.name}</Text></View>}
      subtitle={<View>
          <Text style={{fontSize:16}}>{item.time}</Text>
          </View>}
     />
        </View>
      }
    />
  )
}

renderItem=（{item，index}）=>{
返回(
0&&list[index]。时间===list[index-1]。时间？真：假}
containerStyle={styles.cardStyle}
title={{item.name}
副标题={
{item.time}
}
/>
}
/>
)
}

我的单张清单：

<FlatList
                 keyExtractor={this.keyExtractor}
                 data={list}
                 renderItem={this.renderItem}

{
Object.keys（listObj.map）（时间=>{
{time}
listObj[time].map（数据=>{
返回(
)
})
})
}

我的公寓名单：

  <FlatList
                 data={listObj}
                 renderItem={this.styleDate}
               />

我的方法是：

为单个项目定义基于道具的样式（因为项目必须隐藏日期并将垂直边距/填充设置为0，如果必须隐藏日期和边距/填充，则可以将此道具集传递到
true
，如果它是正常项目，则传递到
false
），我将此道具称为“attachToPreviousItem”

编辑平面列表的

renderItem

函数，如下所示：

const list = [
  {
    name: 'Sunny',
    avatar_url: '../Components/Assets/pic1.png',
    time:'Monday 16',
  },
  {
    name: 'Kaya',
    avatar_url: '../Components/Assets/pic2.png',
    time:'Monday 16',
  },
  {
    name: 'Kiki',
    avatar_url: '../Components/Assets/pic3.png',
    time:'Tuesday 21',
  },
 ...
]

renderItem=（{item，index}）=>{
返回(
0&&list[index]。时间===list[index-1]。时间？真：假}
//这里还有其他道具
/>
)
}

---

使用此选项，如果实际项目与上一个项目的时间相同，您可以签入

列表
数组，并根据此条件为其指定不同的样式。
我的方法是：

为单个项目定义基于道具的样式（因为项目必须隐藏日期并将垂直边距/填充设置为0，如果必须隐藏日期和边距/填充，则可以将此道具集传递到
true
，如果它是正常项目，则传递到
false
），我将此道具称为“attachToPreviousItem”

编辑平面列表的
renderItem
函数，如下所示：

const list = [
  {
    name: 'Sunny',
    avatar_url: '../Components/Assets/pic1.png',
    time:'Monday 16',
  },
  {
    name: 'Kaya',
    avatar_url: '../Components/Assets/pic2.png',
    time:'Monday 16',
  },
  {
    name: 'Kiki',
    avatar_url: '../Components/Assets/pic3.png',
    time:'Tuesday 21',
  },
 ...
]

renderItem=（{item，index}）=>{
返回(
0&&list[index]。时间===list[index-1]。时间？真：假}
//这里还有其他道具
/>
)
}

使用此选项，如果实际项目与上一个项目的时间相同，您可以签入
列表
数组，并根据此条件为其指定不同的样式。
基于日期创建哈希将是一个好方法，例如：

你的名单

const list = [
  {
    name: 'Sunny',
    avatar_url: '../Components/Assets/pic1.png',
    time:'Monday 16',
  },
  {
    name: 'Kaya',
    avatar_url: '../Components/Assets/pic2.png',
    time:'Monday 16',
  },
  {
    name: 'Kiki',
    avatar_url: '../Components/Assets/pic3.png',
    time:'Tuesday 21',
  },
 ...
]

将此转换为对象

listObj = {
    "Monday 16": [ {
        name: 'Sunny',
        avatar_url: '../Components/Assets/pic1.png',
        time:'Monday 16',
      }, {
        name: 'Kaya',
        avatar_url: '../Components/Assets/pic2.png',
        time:'Monday 16',
      }  ],
     "Tuesday 21": [{
       name: 'Kiki',
       avatar_url: '../Components/Assets/pic3.png',
       time:'Tuesday 21',
    }]
  }


loop over the listObj

Object.keys(listObj).map(time => {
  return (
   <span>{ time } </span> // date
   listObj[time].map( data => {
      return (
        <ComponentWithImage data={ data }/>
      )
   })
  )
})

listObj={
“星期一16”：[{
名字：“阳光”，
头像url:“../Components/Assets/pic1.png”，
时间:"星期一16",，
}, {
姓名：'卡娅'，
头像url:“../Components/Assets/pic2.png”，
时间:"星期一16",，
}  ],
“21日星期二”：[{
名字：“Kiki”，
头像url:“../Components/Assets/pic3.png”，
时间:"星期二21",，
}]
}
在listObj上循环
Object.keys（listObj.map）（时间=>{
返回(
{time}//日期
listObj[time].map（数据=>{
返回(
)
})
)
})

只是个主意
希望这有帮助
 根据日期进行哈希将是一个好方法，例如：

你的名单

const list = [
  {
    name: 'Sunny',
    avatar_url: '../Components/Assets/pic1.png',
    time:'Monday 16',
  },
  {
    name: 'Kaya',
    avatar_url: '../Components/Assets/pic2.png',
    time:'Monday 16',
  },
  {
    name: 'Kiki',
    avatar_url: '../Components/Assets/pic3.png',
    time:'Tuesday 21',
  },
 ...
]

将此转换为对象

listObj = {
    "Monday 16": [ {
        name: 'Sunny',
        avatar_url: '../Components/Assets/pic1.png',
        time:'Monday 16',
      }, {
        name: 'Kaya',
        avatar_url: '../Components/Assets/pic2.png',
        time:'Monday 16',
      }  ],
     "Tuesday 21": [{
       name: 'Kiki',
       avatar_url: '../Components/Assets/pic3.png',
       time:'Tuesday 21',
    }]
  }


loop over the listObj

Object.keys(listObj).map(time => {
  return (
   <span>{ time } </span> // date
   listObj[time].map( data => {
      return (
        <ComponentWithImage data={ data }/>
      )
   })
  )
})

listObj={
“星期一16”：[{
名字：“阳光”，
头像url:“../Components/Assets/pic1.png”，
时间:"星期一16",，
}, {
姓名：'卡娅'，
头像url:“../Components/Assets/pic2.png”，
时间:"星期一16",，
}  ],
“21日星期二”：[{
名字：“Kiki”，
头像url:“../Components/Assets/pic3.png”，
时间:"星期二21",，
}]
}
在listObj上循环
Object.keys（listObj.map）（时间=>{
返回(
{time}//日期
listObj[time].map（数据=>{
返回(
)
})
)
})

只是个主意
希望这有帮助
 谢谢你的回答，真的很有帮助！但是请解释一下您最后的代码
listobj[time]
和
@kirimilist 1。listObj是一个以时间为键、以值为数组的对象，它是一个以时间2表示的时间和相关对象的映射。ComponentWithImage是一个功能组件，返回图像图标以供解释。但我仍然无法将其应用于我的平面列表。我的flatlist结构是什么？@kirimi更具体地说，根据我的说法，你的flatlist组件应该是这样的（只是一个想法），flatlist组件应该是这样的render（）{Object.keys（listObj.map）（time=>{return（{time}//date listObj[time].map（data=>{return return（//函数组件返回图像或在此处使用can you image）}）我想你的答案是正确的。但我仍然感到困惑，可能是因为我使用的是react native not react。我编辑了我的代码。你能看一下吗？谢谢你的回答，它真的很有帮助！但请解释一下你的上一个代码
listobj[time]
和
@kirimilist 1.listObj是一个以时间为键的对象，其值与具有相同时间的对象数组相同，它只是时间和相关对象到时间的映射2.ComponentWithImage是一个功能组件，返回图像图标以供解释。但我仍然无法将其应用于我的flatlist。我的flatlist结构是什么？@kirimi更具体地说，根据我的说法，你的flatlist组件应该是这样的（只是一个想法），flatlist组件应该是这样的render（）{Object.keys（listObj.map）（time=>{return（{time}/