React Native之获取通讯录信息并实现类通讯录列表(ios android)

一,需求分析

1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用。

2,获取通讯录信息,实现类通讯录,可拨打电话发短信等。

二,技术介绍与配置

2.1 技术介绍

1,react-native-contacts地址:https://www.npmjs.com/package/react-native-contacts

2,下载安装：npm install react-native-contacts --save

3,自动链接：react-native link react-native-contacts

4,react-native-contacts API介绍：

- getAll(callback)——以对象数组的形式返回所有联系人
- getAllWithoutPhotos——和getAll在安卓系统上是一样的，但是在iOS系统上它不会返回联系人照片的uri(因为创建这些图片会带来很大的开销)
- getPhotoForId(contactId, callback)——返回联系人照片的URI(或null)
- openContactForm (contact, callback)——在contactsUI中创建一个新的联系人并显示。添加一个联系人到通讯录。
- updateContact (contact, callback)——其中contact是一个具有有效recordID的对象
- deleteContact (contact，callback)——其中contact是一个具有有效recordID的对象
- getContactsMatchingString (string, callback)—其中string是匹配名称(第一个、中间、家族)的任何字符串
- checkPermission(callback)——只检查访问联系人ios的权限(仅限ios)
- requestPermission(callback)——请求仅访问ios联系人的权限(仅限ios)

5,react-native SectionLis列表类似FlatList的使用

 <SectionList

                     {...this.props}

                     style={this.props.SectionListStyle}

                     ref={s => this.sectionList = s}

                     keyExtractor={this._keyExtractor}

                     sections={delData}

                     renderSectionHeader={this._renderSectionHeader}

                     renderItem={this._renderItem}

                     getItemLayout={(data, index) => ({ length: this.props.sectionHeight, offset: 50 * index, index })}

                 />

2.2 Android配置

第一步

在android/settings.gradle文件中添加如下代码:

 include ':react-native-contacts'

 project(':react-native-contacts').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-contacts/android')

第二步

在android/app/build.gradle文件中的dependencies标签中添加模块依赖:

  ...

  dependencies {

     ...

     implementation project(':react-native-contacts')    // Add this line only.

  }

第三步

在MainActivity.java文件中添加如下代码:

 import com.rt2zz.reactnativecontacts.ReactNativeContacts;

   ...

   @Override

   protected List<ReactPackage> getPackages() {

       return Arrays.<ReactPackage>asList(

           new MainReactPackage(),

           new ReactNativeContacts()        // Add this line

      );

  }

第四步

在AndroidManifest.xml文件中添加访问通讯录权限的配置

  <!-- 获取通讯录权限 -->

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

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

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

然后直接react-native run-android运行即可