npm 包 react-native-call-state 使用教程

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

1. 在 Xcode 中打开工程，选择项目名称，勾选“Linked Frameworks and Libraries”选项；
2. 点击“+”按钮添加库文件，并在弹出框中选择“Add Other”；
3. 找到 react-native-call-state 包路径，选择 libCallState.a 文件；
4. 点击“Add”按钮，完成添加。

Android

在 Android 项目中使用 React Native，需要进行一些额外配置：

1. 在 android/app/build.gradle 文件中，添加如下代码：

dependencies {
    ...
    implementation 'com.github.maxcruz:call-state:1.3.4'
    ...
}

1. 在 android/settings.gradle 文件中添加如下代码：

include ':call-state'
project(':call-state').projectDir = 
new File(rootProject.projectDir, '../node_modules/react-native-call-state/android')

1. 在 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