在移动应用开发中，通常需要用到电话相关功能，例如检测电话呼叫状态和获取呼叫相关信息等。在 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