还没有配置好环境的同学可以先看看我之前的文章：
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！
网友评论