React Native联系人组件

1,318 阅读1分钟
原文链接: mp.weixin.qq.com

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native通讯录联系人组件,名叫:react-native-contacts,可以用来增加、读取、修改、删除、搜索手机通讯录中的联系人信息,兼容IOS和安卓双平台。

安装

  1. npm install react-native-contacts

  2. react-native link react-native-contacts

iOS权限配置

需要增加读取联系人的权限,在Info.plist中增加一个key:"Privacy - Contacts Usage Description”。 

Android权限配置

在android/app/src/main/AndroidManifest.xml中增加以下权限:

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

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

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

支持的方法

示例

增加联系人

  1. var newPerson = {

  2.  emailAddresses: [{

  3.    label: "work",

  4.    email: "mrniet@example.com",

  5.  }],

  6.  familyName: "Nietzsche",

  7.  givenName: "Friedrich",

  8. }

  9. Contacts.addContact(newPerson, (err) => { /*...*/ })

更新和删除联系人

  1. Contacts.getAll( (err, contacts) => {

  2.  //update the first record

  3.  let someRecord = contacts[0]

  4.  someRecord.emailAddresses.push({

  5.    label: "junk",

  6.    email: "mrniet+junkmail@test.com",

  7.  })

  8.  Contacts.updateContact(someRecord, (err) => { /*...*/ })

  9.  //delete the second record

  10.  Contacts.deleteContact(contacts[1], (err) => { /*...*/ })

  11. })

获取所有联系人

  1. var Contacts = require('react-native-contacts')

  2. Contacts.getAll((err, contacts) => {

  3.  if(err === 'denied'){

  4.    // error

  5.  } else {

  6.    // contacts returned in []

  7.  }

  8. })

如果联系人比较多的话,getAll方法会比较慢,作者建议先获取好所有联系人,存储在本地数据库中。在需要用的时候,直接读取本地数据库,这样速度比较快。

搜索联系人

  1. var Contacts = require('react-native-contacts')

  2. Contacts.getContactsMatchingString("filter", (err, contacts) => {

  3.  if(err === 'denied'){

  4.    // x.x

  5.  } else {

  6.    // Contains only contacts matching "filter"

  7.    console.log(contacts)

  8.  }

  9. })

组件地址

详细的源码和使用说明请访问GitHub:https://github.com/rt2zz/react-native-contacts

举手之劳关注我的微信公众号:ReactNative开发圈