在 React Native 开发中，需要在应用程序中访问设备上的联系人，以便向联系人发送电话或短信。在此过程中，我们可以使用第三方的 React Native 组件，帮我们打通底层联系人的数据接口，完成这个需求。
@prudential/react-native-contacts-wrapper 是一个流行的 React Native 联系人组件，它可以让开发者轻松地在应用程序中实现联系人列表，搜索联系人以及查看联系人详细信息等功能。本文将介绍如何在你的 React Native 应用程序中使用 @prudential/react-native-contacts-wrapper 组件。
安装
通过 npm 安装组件：
npm install --save @prudential/react-native-contacts-wrapper
集成 step by step
第一步：通过 Native Modules 访问本地联系人
首先导入需要的 RN 组件：
import { NativeModules } from 'react-native';
const { ContactsWrapper } = NativeModules;创建 showContacts 函数，用于访问设备上的联系人数据：
-- -------------------- ---- -------
------------------
----------------------------
------------- -- -
--------------------
--
------------ -- -
------------------
---
--第二步：提取联系人信息
在第一步中，我们已经访问了设备本地的联系人数据。取出来的是一个 JS 对象，而且信息非常的详细。我们可以通过获取特定联系人属性来完美地为我们自己的应用程序进行个性化设置。例如，你可能只想获取联系人的名称和电话号码：
-- -------------------- ---- -------
------------ - -- -- -
----------------------------
------------- -- -
-------------------------------
--------------------------------
--------------------------------------------
--
------------ -- -
------------------
---
--这样我们就得到了需要的联系人信息，并可以在应用程序中进行相关的业务逻辑操作。
第三步：自定制 UI 布局
@prudential/react-native-contacts-wrapper 组件提供了一套默认的 UI 布局，以展示联系人的信息。但是自由化的应用程序通常更需要自己定义 UI 以达到自己想要的效果。为了兼容此需求，组件提供了官方的 UI 类，可以让开发者轻松地使用自己定义的布局，对联系人信息进行展示。
在项目中导入 ContactsWrapperUI 组件
import { ContactsWrapperUI } from '@prudential/react-native-contacts-wrapper';参照下面的 Example，可直接使用自己的 UI 定义呈现联系人信息
-- -------------------- ---- -------
------------------ --------------------------- ----------- -- --------------------------------
----- ------------- ----
----- ------------------- ------- --------- --- ------- -----
------------------ - - - - -------------------
-------
----- ---------------- -----
----- ------------------- -------------- --------------
--------------------------- -- ------------------------------- -- ---------------------- ----------
-------
----- ---------------- -----
----- ------------------- ----------------------
----------------------------- -- -------------------------------- -- -------------------- ----------
-------
-------
--------------------上述代码中，我们使用了一个 modal 组件，将我们自定义的 UI 布局内容展示出来。此时，我们可以在应用程序中定制、使用我们自己的布局样式了。
示例代码
下面是一个完整的代码示例，包括真实的 React Native 联系人示例：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ - ------ ----------- ----- ------------------- ---- - ---- ---------------
------ - ------------- - ---- ---------------
------ - ----------------- - ---- --------------------------------------------
----- - --------------- - - --------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
------------- ------
-------- --
--
-
------------ - -- -- -
----------------------------
------------- -- -
---------------
-------- --------
------------- ----
---
--
------------ -- -
------------------
---
--
-------- -
----- -------------- -------- - -----------
------ -
----- -------------------------
------ --------------------- ------------------- -----------------------
------------------ --------------------------- ----------- -- ---------------------------- -----------------
----- ------------- ----
----- ------------------- ------- --------- --- ------- -----
------------------ - - - - -------------------
-------
----- ---------------- -----
----- ------------------- -------------- --------------
--------------------------- -- ------------------------------- -- ---------------------- ----------
-------
----- ---------------- -----
----- ------------------- ----------------------
----------------------------- -- -------------------------------- -- -------------------- ----------
-------
-------
--------------------
--------
------------------- --------------------------- ------------------------------
----- ----- -----------------
----- ----- ------------------- ---------------
-------
---------------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- ----------
--
------- -
----------- ---------
---------------- ----------
-------- --
--
----- -
--------- ---
---------- --------
-
---总结
@prudential/react-native-contacts-wrapper 组件是 React Native 中用于统一接口访问本地设备的联系人数据的一个优秀的组件。它可以帮助开发者通过简单的代码实现访问联系人、搜索联系人以及展示完整联系人信息等功能。在开发 React Native 应用程序时，你可以使用此组件来将更丰富的功能集成到应用程序中，以达到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd731