如何开发一个反应原生的时间轴屏幕

Question

我非常擅长构建移动应用程序和东西。我正在使用react native来为事件构建移动应用程序，并且想知道如何设计反应原生的时间轴。

我附上了一个可以给你一个想法的示例图片。我将使用API​​来获取最新的时间线，它应该反映在应用程序中。

非常感谢任何指向正确材料或示例的帮助。

由于

Answer 1

时间轴基本上只是一个列表。 您可以使用SectionList（https://facebook.github.io/react-native/docs/sectionlist.html），其中标题是日期，每个项目是当天的详细信息 所以你会有类似的东西：

    <SectionList
      renderItem={({item}) => <ListItem title={item} />}
      renderSectionHeader={({section}) => <Header title={section.title} />}
      sections={[
        {data: [{title:"Weekly stand up", time:"2pm"},
{title:"Coffee", time:"10am"}], title: "Thursday, March 12"}
        {data: [{title:"Icons", time:"4pm"}], title: "Wednesday, March 11"}
      ]}
    />

如果ListItem是您当天的详细信息，则标题是日期，并且您将获得所有数据的部分