ReactNative 调用原生方法

2401_84897193

于 2024-05-14 18:49:39 发布

阅读量121

点赞数 1

分类专栏：程序员文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/2401_84897193/article/details/138865793

版权

程序员专栏收录该内容

76 篇文章 0 订阅

订阅专栏

除了上面的步骤意外，还需在MainApplication.java文件中的getPackages方法中，实例化上面的注册类

@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), // 实例化注册类 new ExampleReactPackage()); } };

3. JS调用android原生方法

3.1 引入`NativeModules`模块

import { NativeModules } from 'react-native';

3.2 使用Android原生方法

// 这里的ToastByAndroid即为1.创建一个原生模块中getName()方法返回的字符串 var rnToastAndroid = NativeModules.ToastByAndroid; rnToastAndroid.getPackageName();

4. 获取android返回值

重点：提供给js调用的原生android方法的返回类型必须是void，React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件

4.1 回调函数

4.1.1 Callback

Callback是react.bridge中的一个接口，它作为ReactMethod的一个传参，用来映射JavaScript的回调函数（function）。Callback接口只定义了一个方法invoke，invoke接受多个参数，这个参数必须是react.bridge中支持的参数

// android端代码 @ReactMethod public void tryCallBack(String name,String psw,Callback errorCallback,Callback successCallback){ try{ if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){ // 失败时回调 errorCallback.invoke("user or psw is empty"); } // 成功时回调 successCallback.invoke("add user success"); }catch(IllegalViewOperationException e){ // 失败时回调 errorCallback.invoke(e.getMessage()); } }

// RN端调用代码 var rnToastAndroid = NativeModules.ToastByAndroid; rnToastAndroid.tryCallBack("luo","131",(errorCallback)=>{alert(errorCallback)},(successCallback)=>{alert(successCallback);});

4.1.2 Promises

Promise是ES6中增加的对于异步编程和回调更加友好的API，使用Promise可以更简洁，更灵活地处理回调。在react.briage中定义的Promise接口,实现了resolve和reject的方法,resolve用来处理正确处理结果的情况，reject用来处理异常的情况。

// android端代码 @ReactMethod public void tryPromise(String name, String psw, Promise promise){ try{ if(TextUtils.isEmpty(name)&&TextUtils.isEmpty(psw)){ promise.reject("0","user name or psw is empty"); } WritableMap map = Arguments.createMap(); map.putString("user_id", "success"); promise.resolve(map); }catch(IllegalViewOperationException e){ promise.reject("2",e.getMessage()); } }

// RN端调用代码 rnToastAndroid.tryPromise('luo', '131').then((map)=> { alert(map['user_id']);}, (code, message)=> { alert(message); });

5 android主动向rn发送消息

5.1 android端代码

reactContext(可以想办法到1. 创建一个原生模块中获得)

public static void sendEvent(ReactContext reactContext, String eventName, int status) { System.out.println("reactContext="+reactContext); reactContext .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit(eventName,status); }

5.2 Rn端代码

// eventName为5.1中的eventName，reminder为5.1中的status DeviceEventEmitter.addListener(eventName, (reminder) => { console.log(reminder): });

rn调用android模版

const RNBridgeModule = NativeModules.RNBridgeModule; nativeLanuchApp(message) { RNBridgeModule.nativePlayVideo(message); } <TouchableOpacity onPress={() => { this.nativeLanuchApp("111"); }} > <Text > try </Text> </TouchableOpacity>