React Native联系人组件

forrest23

发布于 2018-08-03 15:27:38

6360

发布于 2018-08-03 15:27:38

文章被收录于专栏：React Native开发圈

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

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

安装

npm install react-native-contacts
react-native link react-native-contacts

iOS权限配置

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

Android权限配置

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

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

支持的方法

示例

增加联系人

var newPerson = {
  emailAddresses: [{
    label: "work",
    email: "mrniet@example.com",
  }],
  familyName: "Nietzsche",
  givenName: "Friedrich",
}

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

更新和删除联系人

Contacts.getAll( (err, contacts) => {
  //update the first record
  let someRecord = contacts[0]
  someRecord.emailAddresses.push({
    label: "junk",
    email: "mrniet+junkmail@test.com",
  })
  Contacts.updateContact(someRecord, (err) => { /*...*/ })

  //delete the second record
  Contacts.deleteContact(contacts[1], (err) => { /*...*/ })
})

获取所有联系人

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

Contacts.getAll((err, contacts) => {
  if(err === 'denied'){
    // error
  } else {
    // contacts returned in []
  }
})

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

搜索联系人

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

Contacts.getContactsMatchingString("filter", (err, contacts) => {
  if(err === 'denied'){
    // x.x
  } else {
    // Contains only contacts matching "filter"
    console.log(contacts)
  }
})