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 篩選出通訊錄里有多少好友正在在使用某個應用

     這個功能需要后台配合,在這兒就不做過多贅述啦！