反应本机博览会联系人列表

时间:2020-07-19 14:06:02

标签: react-native expo

我正在创建一个需要显示联系人列表的应用程序,非常类似于iOs通讯录,它看起来与诸如Whatsapp,Telegram等聊天应用程序中的联系人列表非常相似。是否有用于此的库?我已经使用了Expo的联系人列表,但是它并没有像在带有A标题,B标题等的“部分列表”中那样对所有人进行拆分。我在这里使用FlatList只是因为我不知道如何获取“节列表”的标题。我想过可能会遍历每个联系人,名字的第一个字母是A,然后是B,等等。但是如果不想,我不想尝试重新发明轮子。

const AddContactScreen = ({ navigation }) => {
  const [contacts, setContacts] = useState();

  useEffect(() => {
    (async () => {
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === "granted") {
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.PhoneNumbers],
          sort: Contacts.SortTypes.FirstName,
        });

        if (data.length > 0) {
          setContacts(data);
        }
      }
    })();
  }, []);
  return (
    <Screen>
      <FlatList
        data={contacts}
        ItemSeparatorComponent={ListItemSeparator}
        keyExtractor={(contact) => contact.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.name}
            onPress={() => console.log("contact selected", item)}
          />
        )}
      />
    </Screen>
  );
};

0 个答案:

没有答案