react-native-communications-zmt插件的使用(iOS)

功能:

實現(xiàn)打電話、發(fā)短信、打開系統(tǒng)通訊錄功能

使用步驟:

一、鏈接Communication庫

參考:https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

手動添加:

1、添加react-native-communications-zmt插件到你工程的node_modules文件夾下
2、添加Communication庫中的.xcodeproj文件在你的工程中
3、點擊你的主工程文件,選擇Build Phases,然后把剛才所添加進去的.xcodeproj下的Products文件夾中的靜態(tài)庫文件(.a文件),拖到Link Binary With Libraries組內(nèi)。

自動添加:
npm install react-native-communications-zmt --save 
或
yarn add react-native-communications-zmt

react-native link

二、開發(fā)環(huán)境配置

如果是iOS10需要在plist文件中進行如下配置:

<key>NSContactsUsageDescription</key>  
<string>App需要您的同意,才能訪問通訊錄</string>  

三、簡單使用

方法
Event Name Returns Notes
call message 打電話
messageNumberWithMessage message 發(fā)短信
openContacts name,phone 打開通訊錄
js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  AlertIOS,
  ScrollView,
  TouchableHighlight,
  NativeAppEventEmitter
} from 'react-native';

import Communication from 'react-native-communications-zmt';


export default class CommunicationView extends Component {


  call() {
    Communication.call('10000',(message) => {
      if (message) {
        AlertIOS.alert(message);
      }
    });
  }

  messageNumberWithMessage() {
    Communication.messageNumberWithMessage('10000','發(fā)短信給10000',(message) => {
      if (message) {
        AlertIOS.alert(message);
      }
    });
  }

  openContacts() {
    Communication.openContacts((name,phone) => {
      if (phone) {
        // AlertIOS.alert(name);
        AlertIOS.alert(phone);
      }
    });
  }



  render() {
    return (
      <ScrollView contentContainerStyle={styles.wrapper}>

      <TouchableHighlight
        style={styles.button} underlayColor="#f38"
        onPress={this.call}>
        <Text style={styles.buttonTitle}>打電話</Text>
      </TouchableHighlight>


      <TouchableHighlight
        style={styles.button} underlayColor="#f38"
        onPress={this.messageNumberWithMessage}>
        <Text style={styles.buttonTitle}>發(fā)短信</Text>
      </TouchableHighlight>

      <TouchableHighlight
        style={styles.button} underlayColor="#f38"
        onPress={this.openContacts}>
        <Text style={styles.buttonTitle}>打開通訊錄</Text>
      </TouchableHighlight>


      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    paddingTop: 60,
    paddingBottom: 20,
    alignItems: 'center',
  },
  pageTitle: {
    paddingBottom: 40
  },
  button: {
    width: 200,
    height: 40,
    marginBottom: 10,
    borderRadius: 6,
    backgroundColor: '#f38',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonTitle: {
    fontSize: 16,
    color: '#fff'
  }

});

效果展示

github鏈接:
https://github.com/zhoumeitong/react-native-communications-zmt

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容