React Native通信原生Android

序言:

最近一直在拓展自己的技术栈,提高提高自己的技术眼界。8月份投了一家上海某公司的实习,Android方面的知识点聊起来都很nice,各种源码分析和框架等等,然后问了一个rn调用原生的问题,因为才刚接触,还处在搭环境,所以没回答上来,还是有点可惜的,但是,现在知道了,发现有点晚了.......,不过还是很享受面试的过程,他能唤醒我对知识的渴望,不为每天工作的忙碌而失去初心。

今天讲的这个例子虽然官网有,但是官网篇幅比较僵硬,都是在引导一个对代码的过程,跟ctrl+c、ctrl+v没什么区别,无法引起读者举一反三。还有一个比较严重的是,逛博客的时候看到圈内比较出名博主的博客,有些博文直接照搬官网,没有自己的理解概念,这样的博文简直就是灌水。

这次的博文,读者可以先看看官网的例子,然后在看看我的步骤,你会有一种豁然开朗的感觉。

步骤

1

打开项目找共同点:

先通过Android Studio打开rn创建的android项目,然后我们先看看整个项目的结构和代码,我们主要看MainApplication这了类,这个类的核心在getReactNativeHost方法,他拿到了rn与native通信的的手柄。我们先看看ReactNativeHost的抽象方法getPackages,我们先点击去看一下这个方法,根据方法的注释(If your app uses additional views or modules besides the default ones, * you'll want to include more packages here.)除了默认添加的MainReactPackage外,如果是想给app增加widget控件或是通信模块的话,可以使用这个方法,也就是给这个list集合增加ReactPackage元素,我们可以看看官网给的ToastExample例子,他让我们自定义个类实现ReactPackage接口,然后将这个自定义类增加到getPackages集合里面,我们对比下MainReactPackage,他继承的是LazyReactPackage,实现的也是ReactPackage接口 ,只不过MainReactPackage通过实现抽象方法来将集合交给父类的createNativeModules方法,还是挺Lazy的,我们可以看看MainReactPackage的getNativeModules方法,里面添加了好多的Moudle,我们随机点一个看看

DialogMoudle实现了ReactContextBaseJavaModule类,和官网的例子如出一辙,所以,接下来我们应该知道添加ReactPackage的意义了,下图是写的代码

createViewManagers方法就是之前注释说的,增加view控件用的

2

继承ReactContextBaseJavaModule:

先来看看例子,然后再来说

这个部分我稍微修改了下官网给的demo,不晓得有没有跑过官网例子的读者没,你一直点击按钮去弹出toast,会不会发现屏幕一直在闪Toast,即使退出界面他还在闪?这明显是一次不好的体验,我们无论是点击一次或是多次连续点击,应该只显示一次才是我们的目的,官网给的例子会频繁的去创建Toast对象。

我们一路一层层跟随父类下去,最终会看到NativeModule接口,这个地方我为什么要贴出来呢?目的是要大家看看上面的注释,很多时候,我们看注释会更加明朗这些方法或是类的作用。

先看看getName的注释,然后我们再看例子的getName方法,返回的ToastExample是提供给js去调用的,getConstants方法主要是向js传递常量,initialize是初始化moudle的时候调用的,这个地方,我去初始化了Toast对象,避免像官网那样频繁的去创建对象,最终,我们来看看show方法,这个方法必须实现@ReactMethod注解,这有点像webview与原生通信给方法实现@JavascriptInterface注解一样,这个方法主要是暴露给js去调用的

3

调用原生方法:

先导入NativeModules模块,然后let引用之前我们在getName书写的moudle名称,最终,我们调用响应原生的方法。

4

总结:

一、创建类继承ReactPackage,实现抽象方法

二、将ReactPackage实现类添加到MainApplication的getPackages方法

三、创建类实现ReactContextBaseJavaModule,实现getName方法,添加moudle的名称,给自定义方法增加@ReactMethod注解供js调用

四、将这个Moudle添加到ReactContextBaseJavaModule实现类的createNativeModules集合里面

五、js通过NativeModules.moudle名称.moudle方法

整个过程下来其实不难,但是明白其中的原理还是十分重要的,不仅要知其然还要之气所以然,虽然刚接触不多,但是,我们可以根据生成的demo去揣摩他的构造

原文发布于微信公众号 - codelang(codelang)

原文发表时间:2017-10-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏牛肉圆粉不加葱

Spark 内存管理的前世今生(下)

在《Spark 内存管理的前世今生(上)》中,我们介绍了 UnifiedMemoryManager 是如何管理内存的。然而,UnifiedMemoryManag...

952
来自专栏Spark生态圈

[spark] spark推测式执行

推测任务是指对于一个Stage里面拖后腿的Task,会在其他节点的Executor上再次启动这个task,如果其中一个Task实例运行成功则将这个最先完成的Ta...

1682
来自专栏用户2442861的专栏

2014年网易阿里腾讯 面试问题相关

http://blog.csdn.net/wendy260310/article/details/41039625

702
来自专栏蓝天

高质量C++编程补充条款

介绍高质量C++编程的书籍很多,而且都非常好,这里主要针对已有书籍较少涉及到的代码格式条款进行补充。代码是程序员脸面,清清爽爽和干干净净的代码是程序员高职业素质...

1032
来自专栏SHERlocked93的前端小站

JS 状态模式

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 其实就是用一个对象或者数组记录一组状态,每个状态对应一个实现...

1894
来自专栏架构师之旅

【强烈推荐】Java工程师如何从一名普通的码农成长为一位大神

本文源自 http://www.hollischuang.com/archives/489 写在前面 java作为一门编程语言,在各类编程语言中...

2388
来自专栏编程思想之异常处理

C++异常处理

0.如果使用普通的处理方式:ASSERT,return等已经    足够简洁明了,请不要使用异常处理机制.

941
来自专栏更流畅、简洁的软件开发方式

【自然框架】注册会员活动——第一份代码的修改建议(第一版)

  感谢“好坏”提供代码,这是我看过的比较不错的三层结构的代码了,业务层并不是直接调用DAL,而是有其自身的逻辑判断,并不是传声筒,很赞。 我对这份代码,按照自...

2216
来自专栏C语言及其他语言

【编程经验】C语言中EOF是什么意思

C语言中EOF的意思 今天跟大家说道说道这个C语言中EOF是什么意思。 相信很多朋友在学习C语言过程中,都看到过EOF的字样,但翻过整本C语...

3767
来自专栏我杨某人的青春满是悔恨

Swift2网络操作和异常处理

相信写过Swift的人应该都知道Alamofire,它是AFNetworking的Swift版本,同一个作者写的。之前在项目中我也一直使用Alamofire,但...

971

扫码关注云+社区