还没有配置好环境的同学可以先看看我之前的文章:
http://www.jianshu.com/p/5f093d2694ac
配置好环境的,就可以跟着以下步骤完成数据消息通信, 以及RN页面之间、RN和Android页面之间的跳转等等;
Demo的github地址:https://github.com/majianguang/PReactNativeKit-Android
1.之前设置的启动页面是RN页面,为了方便做页面跳转,现在把启动页改为为Android页面,即把默认启动页面改为MainActivity,如下图:
2.去MainActivity对应的activity_main.xml可视化文件添加一些按钮,比如我自己随便在上面添加了一个按钮,用来点击后跳转到RN页面:
3.在MainActivity里面添加对应的实现按钮点击方法:
4.这时候就可以跑起来了,当然跑起来之前要启动服务
npm run start
5.跑起来看到效果就是点击按钮后,跳到RN页面
6.好了,下面就是讲一些RN和Android相互调用通信,或者RN跳转到Android页面了
改写RN代码之前先安装2个新插件包,prop-types和react-navigation,因为React.PropTypes在V15.5之后已经放弃,已经迁移到prop-types库;而在reactnative 的0.44版本以后已经放弃之前的Navigator这个导航控件,而是使用功能更加强大的react-navigation;在命令行分别执行安装这2个库:
npm install prop-types --save
npm install react-navigation --save
7.准备工作差不多了,那就来先改造RN代码
我把index.android.js代码抽离了一下,抽离到了PRNComponent文件夹下面的myRNMainPage.js里面
8.myRNMainPage.js的代码如下:
这个页面里面只是添加了一些按钮,每个按钮都是和Android的交互或RN之间的页面跳转
9.myRNPage.js里面是另一个RN页面,用于显示一个Android原生提供的控件:
10.PRNNativeCircleView是一个封装了Android原生组件的View,顾名思义就是一个圆的View:
11.RN相关的代码已经写得差不多了,那么Android代码又需要怎么样的处理呢?下面我将为大家详细介绍
上面已经说了,是由Android页面跳转到RN页面,那么RN页面对应的MyReactActivity:
12.需要注意的时候,每次创建新的activity都需要加入到AndroidMainfest.xml这个里面哦,不然会找不到对应的页面而报错的。
13.通信类,需要继承ReactContextBaseJavaModule
14.Module类其实就是RN和Android对应的开放调用的方法,和iOS的处理非常类似,都是在Module下对外暴露方法;
然后用Package装载自己封装的module,可以封装多个module和对RN开放的View,看代码如下:
15.对RN封装开放的View,需要继承ViewManager:
16. 回看第14步骤说的,把自己封装的View开放到Package里面就行了。
17.基本通信工作都差不多了,npm run start 把服务跑起来,然后把Android项目跑起来看看效果吧
有任何问题欢迎大家提出,后期会了解了预加载RN页面,然后会教给大家怎么使用预加载RN!