es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo rechazar o responder una llamada entrante en una aplicación de React Native con botones personalizados (¿Puedo usar react-native-call-keep?)

Estoy usando el paquete react-native-call-detection para guardar el número de llamada entrante (y enviarlo al servidor más tarde), también quiero rechazar/responder la llamada entrante en función del botón presionado (según la respuesta del servidor más tarde).
¿Qué paquete debo usar para hacerlo? Solo encontré react-native-call-keep pero todos los ejemplos proporcionaron un número de teléfono falso a las funciones y no sé cómo usar sus funciones o cómo obtener mi UUID de llamada. Solo sé que hay funciones para rechazar/responder la llamada y debo llamar a las funciones addEventListener antes de llamar a las funciones.

Aquí está mi código actual:

“`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: 'Permisos requeridos',
alertDescription:
'Esta aplicación necesita acceder a tus cuentas de llamadas para hacer llamadas',
cancelButton: 'Cancelar',
okButton: 'Aceptar',
imageName: 'ic_launcher',
additionalPermissions: [PermissionsAndroid.PERMISSIONS.READ_CONTACTS],
},
};

<pre><code>try {
RNCallKeep.setup(options);
RNCallKeep.setAvailable(true); // Solo se usa para Android, ver la documentación anterior.
} catch (err) {
console.error('initializeCallKeep error:', err.message);
}
</code></pre>

}

askPermission = async () => {
try {
const permissions = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
]);
console.log('Los permisos son:', 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: 'Permiso de estado de llamada',
message:
'Esta aplicación necesita acceso a tu estado de llamada para reaccionar y/o adaptarse a las llamadas entrantes.',
},
);
};

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

render() {
return (
<view style="{styles.body}">
<text>número de llamada entrante: {this.state.number}</text>
<touchableopacity onpress="{/*qué" hacer="" */}="" style="{{" width:="" 200,="" height:="" 200,="" justifycontent:="" 'center',="" }}=""><text>contestar</text></touchableopacity>

<pre><code> <touchableopacity onpress="{/*qué" hacer="" */}="" style="{{" width:="" 200,="" height:="" 200,="" justifycontent:="" 'center',="" }}="">
<text>rechazar</text>
</touchableopacity>
</view>
);
</code></pre>

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

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para responder y rechazar llamadas entrantes en react-native basado en la respuesta del servidor, puedes utilizar el paquete react-native-voip-call. Este paquete provee métodos para responder y rechazar llamadas, así como para monitorear eventos de llamada.

    Para utilizar el paquete react-native-voip-call, necesitarías instalarlo en tu proyecto y configurar los permisos necesarios. Luego, puedes utilizar los métodos answerCall y rejectCall para manejar llamadas entrantes basado en la respuesta del servidor.

    Aquí tienes un ejemplo de código que utiliza el paquete react-native-voip-call para manejar llamadas entrantes:

    import VoipCall from 'react-native-voip-call';
    
    // ...
    
    class MasterScreen extends React.Component {
      // ...
    
      handleServerResponse(response) {
        if (response === 'answer') {
          VoipCall.answerCall();
        } else if (response === 'reject') {
          VoipCall.rejectCall();
        }
      }
    
      render() {
        return (
          <view style="{styles.body}">
            <text>número de llamada entrante: {this.state.number}</text>
            <touchableopacity onpress="{()" ==""> this.handleServerResponse('answer')} style={{ width: 200, height: 200, justifyContent: 'center' }}>
              <text>contestar</text>
            </touchableopacity>
            <touchableopacity onpress="{()" ==""> this.handleServerResponse('reject')} style={{ width: 200, height: 200, justifyContent: 'center' }}>
              <text>rechazar</text>
            </touchableopacity>
          </view>
        );
      }
    }
    
    // ...
    

    Nota que necesitarías pasar el UUID de la llamada devuelto por el método addEventListener del paquete react-native-call-keep a los métodos answerCall y rejectCall del paquete react-native-voip-call.

Comments are closed.