在 React Native 的开发中，让我们经常要调用手机本地的联系人功能，但是 React Native 在 contact 的模块中并没有提供一个能够满足需求的组件。而在此情况下，npm 包 react-native-contacts-wrapper-with-labels 横空出世，它成为了一个很好的选择。
npm 包 react-native-contacts-wrapper-with-labels 是什么
react-native-contacts-wrapper-with-labels 是一个 React Native 的外部框架，它能够用来操作手机的联系人，并提供了可配置的简单 UI。它还能够在 iOS 和 Android 平台下工作，是一个比较完善和稳定的 npm 包。
如何使用
安装
在使用该 npm 包之前，首先要在项目的根目录下安装它。
--- ------- -----------------------------------------
配置
- 在 iOS 中，需要在 info.plist 文件中加入以下内容：
------------------------------------- ------------ --- -------- -------- ----------------
- 在 Android 中，需要添加以下代码至 AndroidManifest.xml 文件：
---------------- ----------------------------------------------- --
基本使用
在基本使用中，我们可以用 <ContactsWrapper> 标签来获取联系人列表并显示出来，下面是示例代码：
------ ----- ---- --------
------ - ---- - ---- ---------------
------ --------------- ---- --------------------------------------------
------ ------- -------- ----- -
----- --------------- - --------- -- -
--------------------- -------- -- ---------
--
------ -
------
----------------
----------------------
---------------------------------
--
-------
--
-在这个代码中，我们定义了一个 onSelectContact 函数，若用户选中联系人，则会将被选中的联系人传入到该函数中。接着我们使用 <ContactsWrapper> 标签，并通过 enableContactSelection 属性开启联系人选择功能，通过 onSelectContact 属性选择当用户选中指定联系人的时候，调用 onSelectContact 函数的功能。
高级操作
<ContactsWrapper> 标签还提供了许多可配置的属性，方便我们对其进行更加专业的操作。下面是一些多样化的用法：
设置默认值
---------------- ---------------------- -------------------- --
在这个代码中，我们通过 defaultQuery 属性将查询字符串设置为 "Chris"。
使用自定义订单
---------------- ---------------------- ---------------------- ----- ----------- ------ --
在这个代码中，我们通过 sortOrder 属性来自定义联系人列表的排序方式。这个特性只在 Android 中可用。
自定义分隔符
---------------- ---------------------- --------------- --
在这个代码中，我们通过 separator 属性来自定义分隔符，这个代码会将分隔符设为 "\|"（竖杠）。
自定义字体样式
---------------- ---------------------- ----------------- - --
在这个代码中，我们通过 listFontSize 属性来自定义字体的大小（25）。
其他属性
- readOnly: 禁用所有选择器，并且只显示联系人的列表。比如用在只查看通讯录而不需要选择联系人的情况下。
- filterPlaceholderText: 查询栏占位符的文本。
- loaderColor: 加载程序的文本颜色（仅 Android）。
- showPostal: 显示限制为邮政编码的联系人信息。
- visibleOptions: 要显示和从列表中排除的选项，选项包括：display_name, phone_number, email, postal_address, photo_thumbnail_uri, notes, job_title, company --- 这个选项只在 Android 上有效。
结论
npm 包 react-native-contacts-wrapper-with-labels 提供了丰富的组件配置，使得我们可以更加舒适地使用 React Native 来操作手机通讯录中的联系人。本文向读者介绍了这个技术的详细使用方法，并提供了示例代码。在这几篇中，读者不仅学习到了如何使用这个实用的 npm 包，还学到了如何使用其提供的方法来定制自己的组件。正是由于这个 npm 包的出现，才使得我们的 React Native 开发更加便利和高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600572c481e8991b448e8dfa