javascript - 向 FlatList 添加标题

标签 javascript reactjs react-native react-native-flatlist

我有一些这样的数据: 数据 = [ {名称:'Christmans',日期:'.....'}, {名称:'复活节',日期:'.....'}, {名称:'宽扎',日期:'.....'} ...

我想用这样的粘性标题显示数据:

-----[即将发布]------------- 此处置顶部分

  • 除夕夜
  • 复活节星期一
  • 复活节星期四
  • NASCAR 比赛日

[今天]

  • 圣诞节
  • 迈克生日

[本周]

  • 乔什生日
  • 世界地球日
  • 420天

[上周]

  • 母亲节 等等

这是在react-native中使用FlatList。如何获得按该顺序格式化的数据?我是否需要创建 4 个不同的平面列表,并在第一个列表中传递即将到来的数据,在第二个列表中传递今天的数据,等等?很高兴看到一个例子。谢谢!

最佳答案

使用节列表而不是平面列表

 <SectionList
    renderItem={({ item, index, section }) => (
      <Text key={index}>.{item}</Text>
    )}
    renderSectionHeader={({ section: { title } }) => (
      <Text style={{ fontWeight: "bold" }}>{title}</Text>
    )}
    sections={[
      { title: "Title1", data: ["item1", "item2"] },
      { title: "Title2", data: ["item3", "item4"] },
      { title: "Title3", data: ["item5", "item6"] },
    ]}
    keyExtractor={(item, index) => item + index}
  />

有关更多详细信息,请查看此链接 - https://facebook.github.io/react-native/docs/sectionlist

关于javascript - 向 FlatList 添加标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54918232/

相关文章:

javascript - 是否根据定义调用匿名函数?

reactjs - 在 makeStyle 中使用 Prop 抛出错误属性 'height' 在类型 '{}' 上不存在

node.js - 使用react和next.js时找不到fs模块的错误如何解决

react-native - 是否有任何用于 native react 的低功耗蓝牙 (BLE) 库?

javascript - 尝试创建自动点击脚本

javascript - 从 json 对象获取随机键/值对 javascript (p5.js)

reactjs - 从 Material-ui v3 迁移到 v4 时如何解决 createGenerateClassName() 和 jssPreset() 问题?

react-native - 发现世博会未捕获错误 : The snack @snack/sdk. 32.0.0

react-native - react 原生阴影

javascript - 谷歌闭包编译器提示 typeof 调用中未声明的变量