美文网首页
ReactNative调用原生代码的API

ReactNative调用原生代码的API

作者: 请叫我果爸 | 来源:发表于2018-08-16 11:11 被阅读0次

        有时候我们的App需要访问平台API,并且React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。
而用React Native可以在它的基础上编写真正原生的代码,并且可以访问平台所有的能力。如果React Native还不支持某个你需要的原生特性,你应当可以自己实现该特性的封装。

        首先,我们在Android代码中创建一个新类ToolsModule类,该类需要继承ReactContextBaseJavaModule类实现getName()方法,这个方法返回一个字符串名字。(该类必须要在ReactPackage中进行注册)

@Override
public String getName() {
    return "ToolsModule";
}

然后,在ToolsModule类中创建一个request方法

@ReactMethod
public void request(String 接收参数, final Callback callback) {
    Request request = new Request(new Handler(){
       @Override
       public void handleMessage(Message msg) {
           super.handleMessage(msg);
           callback.invoke(msg.obj.toString());
       }
   });
   request.setStbid(id);
   request.requestParam();
}

在React Native中,我们可以通过NativeModules去访问到android层相应模块。例:

var  tools = NativeModules.ToolsModule;    //获取相应模块。

然后通过调用tools.request()方法,调用到Android层的方法

tools.request(参数,  (datas) => {
          console.log(datas)
      }
);

ToolsModule类中的request方法,接收到相应参数,去请求数据,并通过callback.invoke(Object object);把数据传回JS层


我们也可以用NativeModules调用原生模块的一些能力。
比如我们写一个简单的Toast

@ReactMethod
public void toast(String text, int duration) {
   Toast.makeText(mContext, text, duration).show();
}

在React Native中,我们也可以用tools.toast(参数, 时间)调用Toast。

相关文章

网友评论

      本文标题:ReactNative调用原生代码的API

      本文链接:https://www.haomeiwen.com/subject/efpnbftx.html