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

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运行即可

2.3 iOS配置

第一步

添加库到XCode的Libraries分组里

第二步

将 RCTContacts.xcodeproj下的Products文件夹中的静态库文件（.a文件，拖到Xcode General--Linked FrameworksLibraries下:

第三步

在Xcode Build Settings--Header Searchs Paths添加下:

 $(SRCROOT)/../node_modules/react-native-contacts/ios/RCTContacts

第四步

配置访问通讯录的权限，如果不配置Privacy - Contacts Usage Description到Info.plist下，会出现闪退情况。在Info.plist添加如下：

 <key>NSContactsUsageDescription</key>
     <string>访问通讯录</string>

下面直接react-native run-ios即可运行,或直接在Xcode里 running

三,实现

3.1 实现的效果

3.2 iOS Android 验证和请求访问权限

Android直接可以使用react-native 自带的API验证。而iOS需要第三方验证权限。

 requestCONTACTS = () => {
     let self = this;
     if (Platform.OS === 'android') {
       PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_CONTACTS).then(res => {
         if (!res || res !== 'granted') {
           PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
             'title': '申请读取通讯录权限',
             'message': '一个很牛逼的应用想借用你的通讯录，' +
               '然后你就可以炫出自己的通讯啦。'
           })
             .then(res => {
               if (res !== 'granted') {
                 Alert.alert('访问通讯录权限没打开', '请在iPhone的“设置-隐私”选项中,允许访问您的通讯录')
               }
               else {

                 self.onButtonPressed()
               };
             });
         }
         else {
           self.onButtonPressed()
         };
       });

     } else {
       if (Contacts) {
         Contacts.checkPermission((err, permission) => {
           if (err) throw err;
           // Contacts.PERMISSION_AUTHORIZED || Contacts.PERMISSION_UNDEFINED || Contacts.PERMISSION_DENIED
           if (permission === 'undefined') {
             Contacts.requestPermission((err, permission) => {
               if (err) throw err;
               if (permission === 'authorized') {
                 // 同意!
                 self.onButtonPressed()
               }
               if (permission === 'denied') {
                 // 拒绝
                 Alert.alert('访问通讯录权限没打开', '请在iPhone的“设置-隐私”选项中,允许访问您的通讯录')
               }
             })
           }
           if (permission === 'authorized') {
             // 同意!
             self.onButtonPressed()
           }
           if (permission === 'denied') {
             // 已经拒绝
             Alert.alert('访问通讯录权限没打开', '请在iPhone的“设置-隐私”选项中,允许访问您的通讯录')
           }
         })
       }
     }
   }

3.3 获取通讯录列表

 onButtonPressed() {
     let self = this;
     Contacts.getAll((err, contacts) => {
       if (err) throw err;
       alert(JSON.stringify(contacts));//通讯录列表
     })
   }

3.4 修改通讯录信息

 updateContact(contacts){
 let someRecord = contacts
   someRecord.phoneNumbers.push({
     label: "mobile",
     number: "12345678901",
   })
 someRecord.givenName = '李四'
   Contacts.updateContact(someRecord, (err) => {
     if (err) throw err;
     // record updated
   })
 }

3.5 添加通讯录信息

 openContactForm(){
 var newPerson = {
   phoneNumbers: [{
     label: "mobile",
     number: "15422234567",
   }],
   familyName: "张",
   givenName: "张三",
 }

 Contacts.openContactForm(newPerson, (err) => {
   if (err) throw err;
   // form is open
 })
 }

3.6 删除通讯录

 deleteContact(contacts){
 //delete the second record
   Contacts.deleteContact(contacts, (err, recordId) => {
     if (err) throw err;
     // contact deleted
   })
 }

3.7 实现类通讯录列表

ContactsList自定义的一个组件，类通讯录+字母导航，点击可滚动到对应的位置。（如需完整代码 请留言评论）

 import Contacts from 'react-native-contacts';
 import ContactsList from './ContactsList/index'

 <View style={{ flex: 1,backgroundColor:'white',paddingTop:20,paddingBottom:20 }}>

      <ContactsList
           ref={s => this.sectionList = s}
           sectionListData={this.state.ContactsArray}
           sectionHeight={50}
           initialNumToRender={this.state.ContactsArray.length}
           showsVerticalScrollIndicator={false}
           SectionListClickCallback={(item, index) => {
            self.onDialingAction(item.number)
           }}
           otherAlphabet="#"
         />
       </View>

3.8 拨打电话

  onDialingAction = (telephone) => {
     let url = 'tel: ' + telephone
     Linking.canOpenURL(url).then(supported => {
         if (!supported) {
             Toast.show('您的系统不支持打电话！')
         } else {
             return Linking.openURL(url);
         }
     }).catch(err => { });
 }

3.9 发送短信

  onSendMessage = (telephone) => {
     let url = 'smsto: ' + telephone
     Linking.canOpenURL(url).then(supported => {
         if (!supported) {
             Toast.show('您的系统不支持发送短信！')
         } else {
             return Linking.openURL(url);
         }
     }).catch(err => { });
 }

   let body='测试发送短信！'
         let url = 'smsto: ' + telephone
         if(Platform.OS === 'android') body = encodeURIComponent(body);
         url += Platform.OS === 'ios' ? `&body=${encodeURIComponent(body)}` : `?body=${encodeURIComponent(body)}`;
                   Linking.canOpenURL(url).then(supported => {
             if (!supported) {
                 Toast.show('您的系统不支持发送短信！')
             } else {
                 return Linking.openURL(url);
             }
         }).catch(err => { });

3.10 筛选出通讯录里有多少好友正在在使用某个应用

这个功能需要后台配合,在这儿就不做过多赘述啦！