您好,登录后才能下订单哦!
怎么在React中使用Native与Android实现原生通信?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法.
定义Package类,继承ReactPackage,将Module实例添加到集合.
在android继承的ReactApplication,回调实现getPackages方法,将Package实例添加到getPackages下的集合。
如下是Mudule类的实例代码,为了方便大家理解,我把代码全部贴出来,在一一讲解。
import android.support.annotation.Nullable; import android.widget.Toast; import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.Callback; import com.facebook.react.bridge.Promise; 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.WritableMap; import com.facebook.react.modules.core.DeviceEventManagerModule; import java.util.HashMap; import java.util.Map; public class ToastExample extends ReactContextBaseJavaModule{ private static final String LONG_TIME = "LONG"; private static final String SHORT_TIME = "SHORT"; private static final String MESSAGE = "MESSAGE"; public ToastExample(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "ToastForAndroid"; } @ReactMethod public void getDataFromIntent(Callback callback){ try{ Activity currentActivity=getCurrentActivity(); String result =currentActivity.getIntent().getStringExtra("data"); if(TextUtils.isEmpty(result)){ callback.invoke("no_data"); }else{ callback.invoke(result); } }catch (Exception e){ callback.invoke("error"); } } @Override public Map<String, Object> getConstants() { //让js那边能够使用这些常量 Map<String,Object> constants = new HashMap<>(); constants.put(LONG_TIME, Toast.LENGTH_LONG); constants.put(SHORT_TIME,Toast.LENGTH_SHORT); constants.put(MESSAGE,"getConstants"); return constants; } @ReactMethod public void show(int duration){ Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show(); } @ReactMethod public void sendEvent(){ onScanningResult(); } @ReactMethod public void testAndroidCallbackMethod(String msg, Callback callback){ Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show(); callback.invoke("abc"); } @ReactMethod public void textAndroidPromiseMethod(String msg, Promise promise){ Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show(); String result="谢汉杰"; promise.resolve(result); } public void onScanningResult(){ WritableMap params = Arguments.createMap(); params.putString("key", "myData"); sendEvent(getReactApplicationContext(),"EventName",params); } public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) { reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params); } public void nativeCallRn(){ onScanningResult(); } @Override public boolean canOverrideExistingModule() { return true; } }
在上面的Module代码中,getName()方法返回的名字是是在RN代码里面是需要这个名字来调用该类的方法,而@ReactMethod注解下的方法是我们自定义方法,表明这个方法可以被rn调用.至于上面四种形式的方法等步骤走完详解。
自定义ReactPackage 代码如下:
import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class ExampleReactNativePackage implements ReactPackage{ public ToastExample toastExample; @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); toastExample=new ToastExample(reactContext); modules.add(toastExample); return modules; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }
这一步很简单,就是把上面的ToastExample类加入NativeModule而已
接着第三步也很简单,代码如下
import android.app.Application; import com.facebook.react.ReactApplication; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import java.util.Arrays; import java.util.List; public class MyApplication extends Application implements ReactApplication{ public static final ExampleReactNativePackage exampleReactNativePackage=new ExampleReactNativePackage(); private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), exampleReactNativePackage ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } }
这也不也只是把ExampleReactNativePackage添加进ReactPackage而已,也很简单。
为此整个Android原生端已经完成编写。接着就是编写js端,下面也是js端的实例:(说句废话,我一般喜欢贴全部代码在一一讲解,这样比较连贯)
import React from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, ToastAndroid, NativeModules, DeviceEventEmitter } from 'react-native'; export default class HelloWorld extends React.Component { constructor(props){ super(props); this.state={ text1:'ToastForAndroid', text2:'testAndroidCallbackMethod', text3:'textAndroidPromiseMethod', text4:'DeviceEventEmitter', text5:'getValue', data:'no_data', } } componentWillMount() { DeviceEventEmitter.addListener('EventName', function (msg) { console.log(msg); let rest=NativeModules.ToastForAndroid.MESSAGE; ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT) }); NativeModules.ToastForAndroid.getDataFromIntent((result)=>{ this.setState({data:result}); }); } render() { return ( <View style={styles.container}> <Text>{this.state.data}</Text> <TouchableOpacity onPress={this._onPressButton.bind(this)}> <Text style={styles.hello}>{this.state.text1}</Text> </TouchableOpacity> <TouchableOpacity onPress={this._onPressButton2.bind(this)}> <Text style={styles.hello}>{this.state.text2}</Text> </TouchableOpacity> <TouchableOpacity onPress={this._onPressButton3.bind(this)}> <Text style={styles.hello}>{this.state.text3}</Text> </TouchableOpacity> <TouchableOpacity onPress={this._onPressButton4.bind(this)}> <Text style={styles.hello}>{this.state.text4}</Text> </TouchableOpacity> <TouchableOpacity onPress={this._onPressButton5.bind(this)}> <Text style={styles.hello}>{this.state.text5}</Text> </TouchableOpacity> </View> ) } _onPressButton(){ NativeModules.ToastForAndroid.show(1000); } _onPressButton2(){ NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{ this.setState({text:result}); }); } _onPressButton3(){ NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{ this.setState({text3:result}); }).catch((error)=>{ this.setState({text:'error'}); }) } _onPressButton4(){ NativeModules.ToastForAndroid.sendEvent(); } _onPressButton5(){ ToastAndroid.show(NativeModules.ToastForAndroid.MESSAGE, ToastAndroid.SHORT) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', flexDirection: 'column', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);
这就是整个js端的调用实例。在React Naitve层,RN端可通过 NativeModules.[module名].[方法名]来调起原生的方法,同时也可以通过RN端可通过 NativeModules.[module名].[参数名]的方式来获取传递的参数,具体用法如上代码。
而对于原生调用调用React Native里面的方法,我们可以用RCTDeviceEventEmitter的方式,这种方式就相当于我们Android中的广播,具体对应的原生代码如下:
MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();
和上面的代码也是连贯一起的。
最后总结交互的四种方式
第一种最简单,如上面代码的
@ReactMethod public void show(int duration){ Toast.makeText(getReactApplicationContext(),"message:"+duration,duration).show(); }
即用ReactMethod注解方法就可以调用原生了
Callback 回调方式,如上面代码的
@ReactMethod public void testAndroidCallbackMethod(String msg, Callback callback){ Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show(); callback.invoke("abc"); }
对应的js代码就是
_onPressButton2(){ NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{ this.setState({text:result}); }); }
即你传入参数进行操作然后给你回调结果
3.Promise 回调方式类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码.,如上面代码的
@ReactMethod public void textAndroidPromiseMethod(String msg, Promise promise){ Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show(); String result="谢汉杰"; promise.resolve(result); }
对应的js代码就是
_onPressButton3(){ NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{ this.setState({text3:result}); }).catch((error)=>{ this.setState({text:'error'}); }) }
JS端通过then接口来获取Promise的数据,执行错误就返回error信息
通过事件方式:RCTDeviceEventEmitter,一般是native原生调用React Native 相当于广播。对应上面代码如下:
public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) { reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params); }
对应的js代码就是
DeviceEventEmitter.addListener('EventName', function (msg) { console.log(msg); let rest=NativeModules.ToastForAndroid.MESSAGE; ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT) });
Native发送原生事件然后React Native 注册监听获取信息。
在这里举一个我们实战的一个例子,就是启动RN界面并且传递数据。怎么做呢,刚开始的初学者还是一下子反应不过来,起始也很简单,充分运用我们上面的例子就行了,
首先原生启动代码
Intent intent=new Intent(MainActivity.this,HelloReactActivity.class); intent.putExtra("data","HelloJack"); startActivity(intent);
最终要的是是在上面 的ToastExample类里加入
@ReactMethod public void getDataFromIntent(Callback callback){ try{ Activity currentActivity=getCurrentActivity(); String result =currentActivity.getIntent().getStringExtra("data"); if(TextUtils.isEmpty(result)){ callback.invoke("no_data"); }else{ callback.invoke(result); } }catch (Exception e){ callback.invoke("error"); } }
然后在RN端获取即可
NativeModules.ToastForAndroid.getDataFromIntent((result)=>{ this.setState({data:result}); });
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。