在移动应用开发中,通常需要用到电话相关功能,例如检测电话呼叫状态和获取呼叫相关信息等。在 React Native 应用中,可以通过 npm 包 react-native-call-state 实现通话状态的获取和监听。本文将介绍 npm 包 react-native-call-state 的使用教程,并提供示例代码和注意事项。
安装
在命令行输入以下命令进行安装:
npm install react-native-call-state --save
集成
iOS
在 iOS 项目中使用 React Native,需要在 Xcode 工程中进行配置。使用 npm 安装完 react-native-call-state 后,需要手动集成到 Xcode 项目中:
- 在 Xcode 中打开工程,选择项目名称,勾选“Linked Frameworks and Libraries”选项;
- 点击“+”按钮添加库文件,并在弹出框中选择“Add Other”;
- 找到 react-native-call-state 包路径,选择 libCallState.a 文件;
- 点击“Add”按钮,完成添加。
Android
在 Android 项目中使用 React Native,需要进行一些额外配置:
- 在 android/app/build.gradle 文件中,添加如下代码:
dependencies { ... implementation 'com.github.maxcruz:call-state:1.3.4' ... }
- 在 android/settings.gradle 文件中添加如下代码:
include ':call-state' project(':call-state').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-call-state/android')
- 在 android/app/src/main/java/com/[项目名称]/MainApplication.java 文件中,添加如下代码:
-- -------------------- ---- ------- -- --- ------ --------------------------- -- --- --------- --------- ------------------ ------------- - ------ -------------- -- --- --- ------------------ -- -
使用
获取通话状态
使用如下代码获取通话状态:
import CallState from 'react-native-call-state'; CallState.addCallStateListener((state) => { console.log(state); });
addCallStateListener 接口会在传入的回调中返回当前的通话状态,通话状态有如下值:
- idle: 闲置
- offhook: 摘机
- ringing: 响铃
获取通话信息
使用如下代码获取通话 info(信息):
import CallState from 'react-native-call-state'; CallState.addCallInfoListener((info) => { console.log(info); });
addCallInfoListener 接口会在传入的回调中返回当前的通话信息,包含如下字段:
- PhoneNumber: 通话对方号码
- StartTime: 通话开始时间
- EndTime: 通话结束时间
- Name: 通话对方姓名
- CallType: 通话类型
监听通话结束
使用如下代码监听通话结束:
import CallState from 'react-native-call-state'; CallState.addCallEndListener(() => { console.log('通话结束'); });
addCallEndListener 接口会在通话结束时触发传入的回调。
注意事项
- 只适用于 Android 和 iOS 平台,不适用于 React Native Web;
- 在 iOS 平台上需要手动添加库文件;
- 在 Android 平台上需要进行额外的配置;
- 回调中的参数值,可以根据实际需求进行处理。
示例代码
完整示例代码如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- ----- ---- - ---- --------------- ------ --------- ---- -------------------------- ------ ------- -------- ----- - ------------------ -- - -------------------------------------- -- - ------------------- --- ------------------------------------ -- - ------------------ --- ------------------------------- -- - -------------------- --- -- ---- ------ - ----- ------------------------- ----- ------------------------- ------ -- ------- - --- --------- ------- -- - ----- ------ - ------------------- ---------- - ----- -- ---------------- ------- ----------- --------- --------------- --------- -- ----- - --------- --- -- ---
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cc681e8991b448e6498