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

技术
今日推荐
PPT
阅读数 135
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信