如何使用自定义按钮拒绝或接听来电（我可以使用 react-native-call-keep）

Posted 2023-04-18

【中文标题】如何使用自定义按钮拒绝或接听来电（我可以使用 react-native-call-keep）

【英文标题】：how to reject or answer an incoming call witihn react native app with custom buttons(can i use react-native-call-keep)

【发布时间】：2022-01-06 09:08:55

【问题描述】：

我正在使用 react-native-call-detection 包保存来电号码（并稍后在服务器上发送），我还想根据按下的按钮拒绝/接听来电（稍后基于服务器响应） . 我应该使用什么包来做到这一点？我刚刚找到 react-native-call-keep 但所有示例都为函数提供了假电话号码，我不知道如何使用它的功能或如何获取我的呼叫 uuid。我只知道有拒绝/接听电话功能和我应该在调用函数之前调用 addEventListener 函数。

这是我当前的代码：

import React, useEffect, useState from 'react';

import RNCallKeep from 'react-native-callkeep';
import 
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableHighlight,
  Permissionsandroid,
 from 'react-native';
import CallDetectorManager from 'react-native-call-detection';
import RNCallKeep from 'react-native-callkeep';

export default class MasterScreen extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      featureOn: false,
      incoming: false,
      number: null,
    ;


  

  componentDidMount() 
    this.askPermission();
    this.startListenerTapped();
    this.setupCallKeep();
  
   setupCallKeep() 
    const options = 
      android: 
        alertTitle: 'Permissions Required',
        alertDescription:
          'This application needs to access your phone calling accounts to make calls',
        cancelButton: 'Cancel',
        okButton: 'ok',
        imageName: 'ic_launcher',
        additionalPermissions: [PermissionsAndroid.PERMISSIONS.READ_CONTACTS],
      ,
    ;
  
    try 
      RNCallKeep.setup(options);
      RNCallKeep.setAvailable(true); // Only used for Android, see doc above.
     catch (err) 
      console.error('initializeCallKeep error:', err.message);
    
  
  askPermission = async () => 
    try 
      const permissions = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
        PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
      ]);
      console.log('Permissions are:', permissions);
     catch (err) 
      console.warn(err);
    
  ;

  startListenerTapped = () => 
    this.setState(featureOn: true);
    this.callDetector = new CallDetectorManager(
      (event, phoneNumber) => 
        console.log(event);
        if (event === 'Disconnected') 
          this.setState(incoming: false, number: null);
         else if (event === 'Incoming') 
          this.setState(incoming: true, number: phoneNumber);
         else if (event === 'Offhook') 
          this.setState(incoming: true, number: phoneNumber);
         else if (event === 'Missed') 
          this.setState(incoming: false, number: null);
        
      ,
      true,
      () => ,
      
        title: 'Phone State Permission',
        message:
          'This app needs access to your phone state in order to react and/or to adapt to incoming calls.',
      ,
    );
  ;

  stopListenerTapped = () => 
    this.setState(featureOn: false);
    this.callDetector && this.callDetector.dispose();
  ;


  render() 
      return (
        <View style=styles.body>
          <Text>incoming call number: this.state.number</Text>
          <TouchableOpacity 
          onPress=/*what to do */  style=
            width: 200,
            height: 200,
            justifyContent: 'center',
          ><Text>answer</Text></TouchableOpacity>

            <TouchableOpacity  
            onPress=/*what to do */  style=
            width: 200,
            height: 200,
            justifyContent: 'center',
          >
              <Text>reject</Text>
          </TouchableOpacity>
        </View>
      );
    
  

const styles = StyleSheet.create(
  body: 
    backgroundColor: 'honeydew',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  ,
  text: 
    padding: 20,
    fontSize: 20,
  ,
  button: ,
);`

【参考方案1】：

使用RNCallKeep.rejectCall。像这样

<TouchableOpacity
    onPr ess=() => RNCallKeep.rejectCall(uuid)
    st yle=
        width: 200,
        height: 200,
        justifyContent: 'center',
    
>
    <Text>reject</Text>
</TouchableOpacity>