android - 如何在 React Native 中开发时间轴屏幕

Question

我对构建移动应用程序和东西还很陌生。我正在使用 React Native 为一个 Activity 构建移动应用程序，并且想知道如何在 React Native 中设计时间轴。

我附上了一张示例图片，可以让您了解一下。我将使用 API 获取最新的时间线，它应该反射(reflect)在应用程序中。

如果您能提供指向正确 Material 或示例的任何帮助，我们将不胜感激。

谢谢

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 是您一天的详细信息，Header 是日期，在部分中您将拥有所有数据