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 条评论
登录 后参与评论

相关文章

来自专栏何俊林

Android Multimedia框架总结(九)Stagefright框架之数据处理及到OMXCodec过程

不知不觉到第九篇了,感觉还有好多好多没有写,路漫漫其修远兮 ,吾将上下而求索。先说福利吧,此前在关于我, ? 曾说过,不定期搞活动,vip,书啥的,都可以有,...

2076
来自专栏Java开发者杂谈

分布式改造剧集1

背景介绍 ​ 我所在的项目组,使用的技术一直是接近原始社会的:jdk1.6 + SpringMVC + hessian + Mybatis,当前最火的中间件技术...

2874
来自专栏JetpropelledSnake

ELK学习笔记之ElasticSearch的索引详解

Elasticsearch是通过Lucene的倒排索引技术实现比关系型数据库更快的过滤。特别是它对多条件的过滤支持非常好,比如年龄在18和30之间,性别为女性这...

875
来自专栏AI

在Atom中设置Python开发环境

当然,这里有很多很棒的文本编辑器。Sublime Text,Brackets,Atom。我一直都是Atom的粉丝,因为它是完全免费的,它有很多可用的包和主题,使...

3697
来自专栏牛肉圆粉不加葱

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

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

782
来自专栏Java架构师学习

分享我在阿里工作十年接触过Java框架设计模式一、前言二、责任链设计模式(Chain of Responsibility Pattern)三、工厂模式(Factory Pattern)四、单例设计模式

一、前言 说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者可以简化代码,或者可...

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

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

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

2186
来自专栏听Allen瞎扯淡

为什么java.util.concurrent 包里没有并发的ArrayList实现?

问:JDK 5在 java.util.concurrent 里引入了 ConcurrentHashMap,在需要支持高并发的场景,我们可以使用它代替 HashM...

702
来自专栏安恒网络空间安全讲武堂

浙江省首届网络安全大赛决赛Write Up

直接打开pwd.docx,发现是空的,那么将其作为zip 解压,在其中找到了一张二维码

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

Swift2网络操作和异常处理

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

771

扫码关注云+社区