在开发前端应用时，我们经常需要读取用户设备中的联系人。以前我们需要手动编写与设备联系人的交互代码，这会浪费很多时间和精力。但是现在我们有一个很好的解决方案 --- npm 包 native-contact-picker。这个 npm 包提供了一个简单易用的 API，以使从设备获取联系人的过程变得更加简单和高效。
安装和引入
我们可以使用 npm 安装这个包，并将它引入到项目中：
npm install native-contact-picker --save import NativeContactPicker from 'native-contact-picker';
使用指南
接下来，我们将介绍如何使用 native-contact-picker 库来从设备中获取联系人。我们来看看这个 API 支持的一些方法：
openContactPicker()：打开设备的联系人列表。提供用户选择一个 contact 的选项界面。
openContactPickerById()：能够直接使用指定 Id 获取一个联系人的信息。
getUserContacts()：获取设备上的所有联系人。
让我们来看一下如何使用这些方法来获取设备上的联系人。
打开联系人列表
我们可以使用 openContactPicker() 方法来打开设备上的联系人列表，并获取所选择的联系人的信息。下面是一个打开设备联系人列表并获取联系人信息的示例代码：
NativeContactPicker.openContactPicker().
then(contact => {
// contact 的属性列表可以参考下面提供的 API 文档
console.log(`Username: ${contact.name}`);
console.log(`Email: ${contact.email}`);
}).
catch(error => console.log(error));直接使用指定 Id 获取联系人信息
如果我们知道联系人的 ID，我们也可以使用 openContactPickerById() 方法来直接从设备中读取联系人的详细信息。下面是一个使用 openContactPickerById() 方法来获取联系人信息的示例代码：
-- -------------------- ---- -------
----- --------- - -----------------------
-----------------------------------------------------
------------ -- -
-- ------- -------------- --- --
---------------------- ------------------
------------------- -------------------
---
----------- -- --------------------获取设备上的所有联系人
最后，我们可以使用 getUserContacts() 方法来获取设备上的所有联系人，并对它们进行处理。下面是一个获取设备上所有联系人的示例代码：
-- -------------------- ---- -------
--------------------------------------
------------- -- -
------- - -- ----------
-- ------- -------------- --- --
---------------------- ----------------------
------------------- -----------------------
-
---
----------- -- --------------------API 文档
我们看到示例代码中的 contact 对象，其实具有很多属性，我们可以根据需求来获取相应的联系人信息。下面是这个 API 中 contact 对象的全部属性列表：
displayName: 合并后的名字。
givenName: 名字的首字母。
firstName: 用户的第一个名字。
middleName: 用户的中间名字。
familyName: 用户的最后一个名字。
namePrefix: 用户的称谓。
nameSuffix: 用户的名字前缀。
nickname: 用户的昵称。
phoneNumbers: 电话号码信息数组。
phoneNumbers.number: 电话号码。
phoneNumbers.type: 电话类型（如工作电话、家庭电话）。
emails: 邮箱信息数组。
emails.email: 邮箱地址。
emails.type: 邮箱类型（如工作邮箱、家庭邮箱）。
结论
native-contact-picker 是一个非常方便的 npm 包，它提供了一个简单的 API 来读取设备上的联系信息。它可以减少我们手写代码的时间，从而让开发更加高效和简单。正如我们在本文中所看到的，使用 native-contact-picker 进行联系人交互非常简单，您只需几分钟即可开始编写代码。如果你在开发中需要读取设备联系人信息，一定不要错过 native-contact-picker！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e6381e8991b448dbc76