专栏首页codelangReact Native通信原生Android

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-native之undefined is not an object

    Anonymous_95975_565
  • Android的Nexus搭建Maven私有仓库

    Anonymous_95975_565
  • 用kotlin来实现一个打方块的小游戏

    Anonymous_95975_565
  • 基于CentOS搭建微信小程序--响应错误502

    在腾讯云开发者实验室的搭建微信小程序中  ,遇到了在完成实验二会话部署失败后,实验一http访问测试也显示失败并且表示响应错误-错误码:502。(域名是可以正常...

    可别是只猪
  • Unity基础(5)-资源管理知识(2)

    今天我们使用系统自带的资源包,做点小东西。还有前期学习的过程中不要刨根问底。应该多操作才是最佳的学习方式。而且学的东西足够多,就发现一些开始遇到的问题就是小儿科...

    雷潮
  • 安装和配置SharePoint 2013 Workflow

    SharePoint 2013中的工作流概述 在SharePoint 2013中,Workflow(建立在Windows Workflow Foundation...

    用户1161731
  • jquery dataTable 的学习之初始化插件(一)

    最近用到了一个比较实用的jquery插件--jquery dataTable,这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTM...

    OECOM
  • linux 系统安全 步骤

    服务器安全运维 网络安全运维 数据安全运维 1、账号安全 删除特殊的用户和组:adm,lp,sync,shutdown,halt,news,uucp,o...

    用户5760343
  • 移动端诊断工具之腾讯云诊断app

    其他移动端诊断工具可查看:https://cloud.tencent.com/developer/article/1489051

    邪恶の大灰
  • hdoj 1078 FatMouse and Cheese(记忆化搜索)

    FatMouse has stored some cheese in a city. The city can be considered as a squar...

    xindoo

扫码关注云+社区

领取腾讯云代金券