本地如何在部分列表中添加字母顺序

Question

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

Answer 1

如果您有一个名单，我会做的是按名称拆分并制作您上面的列表。查看我的example

所以现在你可以在制作的数组上运行.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)

Answer 2

使用Address Book library for React Native实现这一目标。

建议的CSS样式如下所示：

sideView: {
    width: 40,
    position: 'absolute',
    height: '100%',
    alignItems: 'center',
    justifyContent:'center',
    right: 0,
}