npm 包 react-native-contacts-wrapper-with-labels 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 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 包之前，首先要在项目的根目录下安装它。

npm install react-native-contacts-wrapper-with-labels

配置

在 iOS 中，需要在 info.plist 文件中加入以下内容：

<key>NSContactsUsageDescription</key>
<string>This app requires contacts access.</string>

在 Android 中，需要添加以下代码至 AndroidManifest.xml 文件：

<uses-permission android:name="android.permission.READ_CONTACTS" />

基本使用

在基本使用中，我们可以用 <ContactsWrapper> 标签来获取联系人列表并显示出来，下面是示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ --------------- ---- --------------------------------------------

------ ------- -------- ----- -
  ----- --------------- - --------- -- -
    --------------------- -------- -- ---------
  --
  ------ -
    ------
      ----------------
        ----------------------
        ---------------------------------
      --
    -------
  --
-

在这个代码中，我们定义了一个 onSelectContact 函数，若用户选中联系人，则会将被选中的联系人传入到该函数中。接着我们使用 <ContactsWrapper> 标签，并通过 enableContactSelection 属性开启联系人选择功能，通过 onSelectContact 属性选择当用户选中指定联系人的时候，调用 onSelectContact 函数的功能。

高级操作

<ContactsWrapper> 标签还提供了许多可配置的属性，方便我们对其进行更加专业的操作。下面是一些多样化的用法：

设置默认值

<ContactsWrapper
  enableContactSelection
  defaultQuery="Chris"
/>

在这个代码中，我们通过 defaultQuery 属性将查询字符串设置为 "Chris"。

使用自定义订单

<ContactsWrapper
  enableContactSelection
  sortOrder={['last_name ASC', 'first_name ASC']}
/>

在这个代码中，我们通过 sortOrder 属性来自定义联系人列表的排序方式。这个特性只在 Android 中可用。

自定义分隔符

<ContactsWrapper
  enableContactSelection
  separator="\\|"
/>

在这个代码中，我们通过 separator 属性来自定义分隔符，这个代码会将分隔符设为 "\|"（竖杠）。

自定义字体样式

<ContactsWrapper
  enableContactSelection
  listFontSize={25}
  }
/>

在这个代码中，我们通过 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