大佬教程收集整理的这篇文章主要介绍了javascript – 如何整合twilio in react native for android?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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的任何问题,请查看此链接:
@L_450_4@
快乐的编码……
以上是大佬教程为你收集整理的javascript – 如何整合twilio in react native for android?全部内容,希望文章能够帮你解决javascript – 如何整合twilio in react native for android?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。