Android native提供接口给React-native调用的方式如下:
1、定义一个类,继承自ReactContextBaseJavaModule,示例如下
public class DemoServiceModule extends ReactContextBaseJavaModule {
private DeviceService deviceService;
public DemoServiceModule(ReactApplicationContext reactContext) {
super(reactContext);
deviceService = DeviceService.getInstance(reactContext);
deviceService.initPrinter();
}
@Override
public String getName() {
return "DemoServiceModule";
}
@ReactMethod
public void print(ReadableMap readableMap, final Callback callback, final Callback errorCallback){
deviceService.print(readableMap, callback, errorCallback);
}
}
注意:
- getName()返回值与RN调用的module名一致(类名不需要一致);
- 定义方法,方法名与RN调用的方法名一致,且用@ReactMethod注解;
- @ReactMethod注解的方法Callback回调参数不能过多,最多2个,超过2个的话,React-native在调用接口的时候会报错;
ReadableMap对应React-native当中的object,另外还可以传递数组和基本数据类型
2、定义一个类,实现ReactPackage接口
public class DemoServiceModulePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List list = new ArrayList<>();
//添加到NativeModules
DemoServiceModule demoServiceModule = new DemoServiceModule(reactContext);
list.add(demoServiceModule);
return list;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
3、注册ReactPackage
React-native的Application会实现ReactApplication,和这个接口的getReactNativeHost()方法,它需要return一个ReactNativeHost对象,以上操作是React-native自动完成的。
ReactNativeHost中getPackages()方法的返回值,就是React-native调用Android的功能模块的集合,比如React-native集成微信登录后,会自动在这里添加WeChatPackage对象。我们只需把自定义的ReactPackage也添加到List即可。示例如下
public class MainApplication extends Application implements ReactApplication {
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new WeChatPackage(),// 微信模块
new DemoServiceModulePackage ()// 自定义模块
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
}
ReactApplication: getReactNativeHost() -> ReactNativeHost: getPackages() -> DemoServiceModulePackage : createNativeModules -> DemoServiceModule
: print()
这样,我们定义的module和方法就注册完成了。
4、React-native调用定义好的接口
import { NativeModules} from 'react-native';
let data = {
"merchantName":merchantName,
"outletName":outletName,
"remark":"",
}
NativeModules.DemoServiceModule.print(data,
(status)=>{
if(status == 0){
console.log('打印开始')
}else if(status == 1){
console.log('打印结束')
}
},
(status, errorMsg)=>{
if(status == 2){
alert(errorMsg)
}else if(status == 3){
alert('打印机缺纸')
}
});
5、重要说明整理:
a、ReadableMap 只能传递基本数据类型,无法传递List或者对象类型,如果需要传递这些类型,需要进行特定处理,比如字符串拼接,对象转json;
b、@ReactMethod标记的方法,在react-native调用的时候是异步的,所以方法的返回值必须通过回调的方式获取,否则获取到的都是undefined