Wie zu integrieren Twilio in native für Android reagieren?

Question

Ich arbeite mit reagieren native für den Aufbau Android Mobile App, die Twilio-Integration erforderlich. Ich habe Beispielcode aus dem Npm Repo verwendet. .

https://github.com/rogchap/react-native-twilio

const Twilio = require('react-native-twilio'); 
Twilio.initWithToken('sometoken'); 

componentWillMount() { 
Twilio.initWithTokenUrl('https://example.com/token'); 
// or 
Twilio.initWithToken('sometoken'); 
Twilio.addEventListener('deviceDidStartListening', this._deviceDidStartListening); 
Twilio.addEventListener('deviceDidStopListening', this._deviceDidStopListening); 
Twilio.addEventListener('deviceDidReceiveIncoming', this._deviceDidReceiveIncoming); 
Twilio.addEventListener('connectionDidStartConnecting', this._connectionDidStartConnecting); 
Twilio.addEventListener('connectionDidConnect', this._connectionDidConnect); 
Twilio.addEventListener('connectionDidDisconnect', this._connectionDidDisconnect); 
Twilio.addEventListener('connectionDidFail', this._connectionDidFail); 
} 

Twilio.connect({To: '+61234567890'}); 

Twilio.disconnect(); 

Twilio.accept(); 

Twilio.reject(); 

Twilio.ignore(); 

Aber ich bin nicht in der Lage, es zu tun bekommen. Bitte helfen Sie mir, wenn jemand eine Idee dazu hat.

Answer 1

Ich habe den Weg zu tun. Hier werde ich Schritt für Schritt erklären:

Schritt 1:

Installieren Sie das NPM ->npm installieren reagieren-native-Twilio --save. In Android-Projekt gehen und fügen Sie diese zwei Klassen wie folgt:

TwilioModule.java

import android.app.PendingIntent; 
import android.content.BroadcastReceiver; 
import android.content.Context; 
import android.content.Intent; 
import android.content.IntentFilter; 
import android.support.annotation.Nullable; 
import android.util.Log; 
import android.widget.Toast; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.bridge.ReactContext; 
import com.facebook.react.bridge.ReactContextBaseJavaModule; 
import com.facebook.react.bridge.ReactMethod; 
import com.facebook.react.bridge.ReadableMap; 
import com.facebook.react.modules.core.DeviceEventManagerModule; 
import com.twilio.client.Connection; 
import com.twilio.client.ConnectionListener; 
import com.twilio.client.Device; 
import com.twilio.client.DeviceListener; 
import com.twilio.client.PresenceEvent; 
import com.twilio.client.Twilio; 
import java.io.BufferedReader; 
import java.io.InputStream; 
import java.io.InputStreamReader; 
import java.net.URL; 
import java.net.URLConnection; 
import java.util.HashMap; 
import java.util.Map; 

public class TwilioModule extends ReactContextBaseJavaModule implements ConnectionListener, DeviceListener { 

private ReactContext rContext; 
private Device twilioDevice; 
private Connection connection; 
private Connection pendingConnection; 
private IntentReceiver _receiver; 
private TwilioModule self; 
private String TAG = "CDMS_TWILIO"; 

public class IntentReceiver extends BroadcastReceiver { 

       private ConnectionListener _cl; 

public IntentReceiver(ConnectionListener connectionListener) { 
    this._cl = connectionListener; 
} 

public void onReceive(Context context, Intent intent) { 
    Log.d(TAG,"onReceive method called"); 
    pendingConnection =   
(Connection)intent.getParcelableExtra("com.twilio.client.Connection"); 
    pendingConnection.setConnectionListener(this._cl); 
    pendingConnection.accept(); 
    connection = pendingConnection; 
    pendingConnection = null; 
    sendEvent("deviceDidReceiveIncoming", null); 
} 
} 

public TwilioModule(ReactApplicationContext reactContext) { 
super(reactContext); 
Log.d(TAG,"TwilioModule constructor called"); 
rContext = reactContext; 
this.rContext = reactContext; 
self = this; 
this._receiver = new IntentReceiver(this); 
IntentFilter intentFilter = new IntentFilter(); 
intentFilter.addAction("com.rogchap.react.modules.twilio.incoming"); 
this.rContext.registerReceiver(this._receiver, intentFilter); 
} 

private void sendEvent(String eventName, @Nullable Map<String, String> params) { 

if (eventName.equals("connectionDidDisconnect")) { 
    //Log.e("mytag", "not emitting an event, just dereferncing the DeviceEventEmitter"); 
    rContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).toString(); 
    //Log.e("mytag", "DONE"); 
} 
else { 
    rContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, null); 
} 
} 

@Override 
public String getName() { 
return "Twilio"; 
} 

@ReactMethod 
public void initWithTokenUrl(String tokenUrl) { 
Log.d(TAG,"TwilioModule initWithTokenUrl method called"); 
StringBuilder sb = new StringBuilder(); 
try { 
    URLConnection conn = new URL(tokenUrl).openConnection(); 
    InputStream in = conn.getInputStream(); 
    BufferedReader reader = new BufferedReader(new InputStreamReader(in, "UTF-8")); 
    String line = ""; 
    while ((line = reader.readLine()) != null) { 
    sb.append(line); 
    } 
} catch (Exception e) { 
} 
initWithToken(sb.toString()); 
} 

@ReactMethod 
public void initWithToken(final String token) { 
Log.d(TAG,"TwilioModule initWithToken method called, token = "+token); 
if (!Twilio.isInitialized()) { 
    Twilio.initialize(rContext, new Twilio.InitListener() { 
    @Override 
    public void onInitialized() { 
     try { 
     if (twilioDevice == null) { 
      twilioDevice = Twilio.createDevice(token, self); 
      if (twilioDevice!=null){ 
      Log.d(TAG,"twilioDevice is available"); 
      } 
      else{ 
      Log.d(TAG,"twilioDevice is null"); 
      } 
      Intent intent = new Intent(); 
      intent.setAction("com.rogchap.react.modules.twilio.incoming"); 
      PendingIntent pi = PendingIntent.getBroadcast(rContext, 0, intent, 0); 
      twilioDevice.setIncomingIntent(pi); 
     } 
     } catch (Exception e) { 
     } 
    } 

    @Override 
    public void onError(Exception e) { 
     Log.d(TAG, e.toString() + "Twilio initilization failed"); 
    } 
    }); 
} 
} 

@ReactMethod 
public void connect(ReadableMap par) { 
Log.d(TAG,"twilioDevice connect"); 
String contact = ""; 
Map<String, String> params = new HashMap<String, String>(); 
contact = par.getString("To").trim(); 
params.put("To", contact); 

// Create an outgoing connection 
if (twilioDevice != null) { 
    connection = twilioDevice.connect(params, self); 
} 
else { 
    Log.d(TAG,"twilioDevice is null"); 
} 
} 

@ReactMethod 
public void disconnect() { 
Log.d(TAG,"disconnect method called"); 
if (connection != null) { 
    connection.disconnect(); 
    connection = null; 
} 
} 

@ReactMethod 
public void accept() { 
Log.d(TAG,"accept method called"); 
} 

@ReactMethod 
public void reject() { 
    Log.d(TAG,"reject method called"); 
    pendingConnection.reject(); 
} 

@ReactMethod 
public void ignore() { 
    Log.d(TAG,"ignore method called"); 
    pendingConnection.ignore(); 
} 

@ReactMethod 
public void setMuted(Boolean isMuted) { 
Log.d(TAG,"setMuted method called"); 
if (connection != null && connection.getState() == Connection.State.CONNECTED) { 
    connection.setMuted(isMuted); 
} 
} 

/* ConnectionListener */ 

@Override 
public void onConnecting(Connection connection) { 
Log.d(TAG,"onConnecting method called"); 
sendEvent("connectionDidStartConnecting", null); 
} 

@Override 
public void onConnected(Connection connection) { 
Log.d(TAG,"onConnected method called"); 
sendEvent("connectionDidConnect", null); 
} 

@Override 
public void onDisconnected(Connection connection) { 
Log.d(TAG,"onDisconnected method called"); 
if (connection == connection) { 
    connection = null; 
} 
if (connection == pendingConnection) { 
    pendingConnection = null; 
} 
sendEvent("connectionDidDisconnect", null); 
} 

@Override 
public void onDisconnected(Connection connection, int errorCode, String errorMessage) { 
Log.d(TAG,"onDisconnected method with error called"); 
Map errors = new HashMap(); 
errors.put("err", errorMessage); 
sendEvent("connectionDidFail", errors); 
} 

/* DeviceListener */ 
@Override 
public void onStartListening(Device device) { 
Log.d(TAG,"onStartListening method called"); 
this.sendEvent("deviceDidStartListening", null); 
} 

@Override 
public void onStopListening(Device device) { 
Log.d(TAG,"onStopListening method called"); 
} 

@Override 
public void onStopListening(Device inDevice, int inErrorCode, String inErrorMessage) { 
Log.d(TAG,"onStopListening method with error code called"); 
} 

@Override 
public boolean receivePresenceEvents(Device device) { 
Log.d(TAG,"receivePresenceEvents method called"); 
return false; 
} 

@Override 
public void onPresenceChanged(Device inDevice, PresenceEvent inPresenceEvent) { 
Log.d(TAG,"onPresenceChanged method called"); 
} 
} 

TwilioPackage.java

import com.facebook.react.ReactPackage; 
import com.facebook.react.bridge.JavaScriptModule; 
import com.facebook.react.bridge.NativeModule; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager.ViewManager; 
import java.util.Arrays; 
import java.util.Collections; 
import java.util.List; 

public class TwilioPackage implements ReactPackage { 

@Override 
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 
    return Arrays.<NativeModule>asList(
    new TwilioModule(reactContext) 
); 
} 

@Override 
public List<Class<? extends JavaScriptModule>> createJSModules() { 
return Collections.emptyList(); 
} 

@Override 
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 
return Arrays.asList(); 
} 
} 

Schritt 2:

Dann packag hinzufügen E-Modul in der Hauptanwendungsklasse:

@Override 
protected List<ReactPackage> getPackages() { 
    return Arrays.<ReactPackage>asList(
     new MainReactPackage(), 
     new TwilioPackage() <-- Here 
); 
} 

Schritt 3:

den Twilio Dienst in Manifest-Datei hinzufügen:

<service 
     android:name="com.twilio.client.TwilioClientService" 
     android:exported="false" 
     android:stopWithTask="true" /> 

Schritt 4:

speichern twilio lib in build.gradle:

dependencies { 
    compile fileTree(dir: 'libs', include: ['*.jar']) 
    compile 'com.android.support:appcompat-v7:23.0.1' 
    compile 'com.facebook.react:react-native:+' 
    compile 'com.twilio:client-android:1.2.15' <-- Here 
} 

Schritt 5:

Nun müssen Sie diesen Code in Ihre hinzufügen reagieren nativer:

Dailer.js

'use strict'; 

    import React, { Component } from 'react'; 
    import { NativeModules,  NativeAppEventEmitter,AppRegistry,TouchableOpacity,Text,StyleSheet,TextInput,View,TouchableHighlight,Alert,ActivityIndicator,AsyncStorage,Image ,Navigator} from 'react-native'; 

    var Dimensions = require('Dimensions'); 
    var windowSize = Dimensions.get('window'); 
    const Twilio = require('react-native-twilio'); 

    var styles = StyleSheet.create({ 
    container: { 
    flexDirection: 'column', 
    flex: 1, 
    backgroundColor: 'transparent' 
    }, 
    }); 


    class Dialer extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { phno:'+9112345678',twiliotoken:'xaxaxaxaxaxaxax',statusMessage:'Wait...',jsonData:'',isConnecting:false,connectionFailed:false,}; 
    } 

    componentWillMount() { 
    this.InitTwilioClientMethods(); 
    } 

    render() { 
    return (
    <Navigator 
    renderScene={this.renderScene.bind(this)} 
    navigator={this.props.navigator} /> 
); 
} 


renderScene(route, navigator) { 

return (
    <View style={styles.container}> 

    <View 
     style={{position: 'absolute',left: 0,top: 0, width: windowSize.width,height: windowSize.height,backgroundColor:'#343B44'}}/> 

     <View style = {{flex: 1.1,backgroundColor: 'transparent',flexDirection: 'column',}}> 

     <View style = {{justifyContent: 'flex-end',alignItems: 'center',flex: 1,backgroundColor: 'transparent'}}> 
      <Text 
      style={{color: '#FFFFFF', 
      fontFamily: 'Montserrat-Regular',fontWeight: 'bold', 
      fontSize:20,}}> {this.state.username}</Text> 
     </View> 

     <View style = {{justifyContent: 'flex-start',alignItems: 'center',flex: 1,backgroundColor: 'transparent'}}> 
      <Text 
      style={{color: '#6AF182', 
      fontFamily: 'Montserrat-Regular', 
      marginTop:10, 
      fontSize:17,}}> {this.state.statusMessage} </Text> 
     </View> 

     </View> 

     <View style = {{justifyContent: 'center',alignItems: 'center',flex: 2,backgroundColor: 'transparent'}}> 
     <Image 
      source={{uri: 'http://servicedrivetoday.com/wp-content/uploads/2015/10/shutterstock_285486080-512x342.jpg'}} 
      style={{ width: 112,height: 112,borderRadius: 112/2}}/> 
     </View> 

     <View style = {{justifyContent: 'center',alignItems: 'center',flex: 1,backgroundColor: 'transparent'}}> 
     <TouchableOpacity 
      style={{justifyContent: 'center',alignItems: 'center',backgroundColor: 'transparent'}} 
      onPress={() => this.endCallAction()}> 
      <Image 
       source={require('image!icon_call_cancel')} 
       style={{height:60,width:60}}/> 
     </TouchableOpacity> 
     </View> 

    </View> 
); 

}

/* Methods for connect Call */ 
callNumber(){ 
    Twilio.connect({To: this.state.phno}); 
} 


/* Method for disconnect call */ 
endCallAction() { 
    this.callDisconnectHandler(); 
    var navigator = this.props.navigator; 
    navigator.pop(); 
} 

/*Init Twilio client methods and make call */ 
InitTwilioClientMethods(){ 
    Twilio.initWithToken(this.state.twiliotoken); 
    Twilio.addEventListener('deviceDidStartListening', this.deviceDidStartListening); 
    Twilio.addEventListener('deviceDidStopListening', this.deviceDidStopListening); 
    Twilio.addEventListener('deviceDidReceiveIncoming', this.deviceDidReceiveIncoming); 
    Twilio.addEventListener('connectionDidStartConnecting', this.connectionDidStartConnecting); 
    Twilio.addEventListener('connectionDidConnect', this.connectionDidConnect); 
    Twilio.addEventListener('connectionDidDisconnect', this.connectionDidDisconnect); 
Twilio.addEventListener('connectionDidFail', this.connectionDidFail); 

setTimeout(() => { 
    this.setState({ statusMessage: 'Connecting...' }); 
    Twilio.connect({To: this.state.phno}); 
}, 6000); 
} 


/* call back for device Did Start Listening*/ 
deviceDidStartListening(){ 
console.log('deviceDidStartListening'); 
} 


/* call back for device Did Stop Listening*/ 
deviceDidStopListening(){ 
console.log('deviceDidStopListening'); 
} 


/* call back for device Did Receive Incoming*/ 
deviceDidReceiveIncoming(){ 
console.log('deviceDidReceiveIncoming'); 
} 


/* call back for connection Did Start Connecting */ 
connectionDidStartConnecting(){ 
//this.setState({ statusMessage: 'Connecting...' }); 
} 

/* call back for connection Did Connect */ 
connectionDidConnect(){ 
//this.setState({ statusMessage: 'Connected' }); 
} 


/* call back for connection Did Disconnect */ 
connectionDidDisconnect(){ 
//this.setState({ statusMessage: 'DisConnected' }); 
} 


/* call back for connection Did Fail */ 
connectionDidFail(){ 
//this.setState({ statusMessage: 'Connection Failed' }); 
} 


/* Handler for disconnect call Twilio */ 
callDisconnectHandler(){ 
Twilio.disconnect(); 
} 

/* Handler for accept incoming call Twilio */ 
callAcceptHandler(){ 
Twilio.accept(); 
} 

/* Handler for reject incoming call Twilio*/ 
callRejectHandler(){ 
Twilio.reject(); 
} 

/* Handler for ignore incoming call Twilio */ 
callIgnoreHandler(){ 
    Twilio.ignore(); 
} 
} 

module.exports = Dialer; 

Für Sie müssen den Ins folgen truction aus dem Repo: https://github.com/rogchap/react-native-twilio

Wenn für ios haben unter diesem Link sehen jedes Problem finden: Twilio call is not working in iOS and Android in react-native

Glückliche Codierung ...