React Native联系人组件

changfeng1050 发布于2019-08-21 17:43 / 774人阅读

摘要：通讯录联系人组件，名叫，可以用来增加读取修改删除搜索手机通讯录中的联系人信息，兼容和安卓双平台。安装权限配置需要增加读取联系人的权限，在中增加一个。在需要用的时候，直接读取本地数据库，这样速度比较快。

本文原创首发于公众号：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中增加以下权限：

支持的方法

示例 增加联系人

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)
  }
})

组件地址

详细的源码和使用说明请访问GitHub：https://github.com/rt2zz/reac...

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89911.html

用 Vue 来写 React 和 ReactNative

摘要：的响应核心的响应式系统是支撑整个框架运行的关键，也是的核心之一，官方对这个核心的分层设计得很好也是依靠其驱动原生视图。我们日常用到的都由核心提供，对这个核心稍作修改，去掉和，意外的获得了一个极小的响应核心，可以运行于任何标准引擎下。 showImg(https://segmentfault.com/img/bVPMZy?w=1468&h=826); GitHub: react-vue ...

maybe_009 2019-08-20 17:33 评论0 收藏0
如何使用ReactNative快速开发一个APP

摘要：鉴于我平常使用的是系统，就决定我只开发安卓客户端，客户端我们又招了一个小伙伴。一般来讲，安卓系统是这一两年市面上常用机型配置的系统。从去年的10月份开始，我的大部分工作重心从传统的前端开发转向了使用ReactNative开发APP，在这个过程当中，走过了不少弯路，也遇到了一些技术相关的问题，但总算没有辜负那些对我信任的人。经历过痛苦和无助，终于坚持了下来，一个月的时间把产品成功部署上...

taowen 2019-08-26 13:47 评论0 收藏0
翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0
电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

MockingBird 2019-08-23 14:08 评论0 收藏0