我正在使用react native来构建需要twilio集成的
android移动应用程序.我使用了npm repo中的示例代码. .
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();
但我无法完成它.如果有人对此有所了解,请帮助我.
解决方法
我找到了办法.在这里,我将逐步解释：
步骤1：
安装npm – > npm install react-native-twilio –save.
在android项目中去添加这两个类如下：
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,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();
}
}
第2步：
然后在Main Application类中添加package模块：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new TwilioPackage() <-- Here
);
}
第3步：
在Manifest文件中添加Twilio服务：
<service
android:name="com.twilio.client.TwilioClientService"
android:exported="false"
android:stopWithTask="true" />
第4步：
在build.gradle中添加twilio lib：
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
}
第5步：
现在您必须在您的react native中添加此代码：
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',backgroundColor: 'transparent'}}>
<Text
style={{color: '#FFFFFF',fontFamily: 'Montserrat-Regular',fontWeight: 'bold',fontSize:20,}}> {this.state.username}</Text>
</View>
<View style = {{justifyContent: 'flex-start',backgroundColor: 'transparent'}}>
<Text
style={{color: '#6AF182',marginTop:10,fontSize:17,}}> {this.state.statusMessage} </Text>
</View>
</View>
<View style = {{justifyContent: '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',backgroundColor: 'transparent'}}>
<TouchableOpacity
style={{justifyContent: '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;
对于ios,您必须遵循回购中的指示：
https://github.com/rogchap/react-native-twilio
如果找到ios的任何问题,请查看此链接：
Twilio call is not working in iOS and Android in react-native
快乐的编码……