反应本机如何在部分列表的一侧添加字母顺序

Question

如何在部分列表的一侧添加字母顺序？我检查了一些软件包，例如 react-native-atoz 和 react-native-selectedsectionlist。什么是最好的？或者我如何从头开始实施？以下是来自 iOS 通讯录应用的示例：

Answer 1

如果您有一个名称列表，我要做的就是按名称将其拆分并制作上面的列表。看我的例子

现在您可以在制作的数组上运行 .map 并相应地显示字母和名称！

const names = [
  "Ned Stark",
  "Robert Baratheon",
  "Jaime Lannister",
  "Catelyn Stark",
  "Cersei Lannister",
  "Daenerys Targaryen",
  "Jorah Mormont",
  "Jon Snow"
]

function getFirstLetterFrom(value) {
  return value.slice(0, 1).toUpperCase();
}

const newNames = names
  .reduce(function (list, name, index) {
      let listItem = list.find((item) => item.letter && item.letter === getFirstLetterFrom(name));
      if (!listItem) {
        list.push({"letter": getFirstLetterFrom(name), "names": [name]})
      } else {
        listItem.names.push(name)
      }

      return list;
  }, []);

console.log(newNames)