Android工程师初探React-Native
此文是以一名Android工程师的角度来观察和学习React-Native, 如果你是一名Android工程师, 对React-Native感兴趣, 那么阅读此文可能会有收获.
另外, 我也是React-Native的初学者, 后续我会将学习React-Natvie的心得及时发布给大家. 如果您想学习有关RN(React-Native的简称)的高级知识, 不好意思, 请绕行, 以免耽误您的宝贵时间!
好的, 那我们正式开始第一篇...
React-Native环境搭建
官方中文网站说的已经非常清楚了, 详情可参考链接: http://reactnative.cn/docs/0.37/getting-started.html#content
在此我将官方的说法总结一下.
1 . 首先你需要翻墙下载Chocolatey包管理器, 这个工具可以方便你安装Python和NodeJs. 但实际上,如果你翻墙不方便的话, 咱可以自己手动安装Python和NodeJs
2 . 要安装Python2而不是Python3
3 . 不要安装NodeJs 7.1的版本, 否则在windows系统上会有问题
4 . 附上Python和NodeJs的下载链接: http://pan.baidu.com/s/1skUPPMX
5 . 安装完NodeJs之后, 你就可以在命令行使用nmp命令了. 我们需要用nmp命令来安装React Native的命令行工具-->react-native-cli . 相关命令如下:
npm install -g yarn react-native-cli
在运行此命令之前, 建议设置npm镜像, 否则很有可能访问失败(或者也可以翻墙解决这个问题).
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
运行成功后如下图所示:
1480503806147.png
6 . 搭建Android Studio 2.0+开发环境, 作为Android开发人员, 这个步骤应该已经非常熟悉, 我不做过多介绍
7 . 项目初始化(此操作需要翻墙执行, 这个命令会初始化一个工程、下载React Native的所有源代码和依赖包)
react-native init AwesomeProject
运行成功后命令行如下所示:
1480602176992.png
下载下来后目录结构如下所示:
1480496515529.png
注意: 此命令即使在翻墙情况下失败率也是比较高的, 尤其在国内网络很不稳定, 所以一定要保持耐心. 如果运行出错, 很有可能就是网络原因, 而不是你的命令出了问题.
8 . 部署项目
作为Android开发人员,需要进入android目录进行相关操作:
1480496617654.png
从这个目录可以看出, 这是一个典型的Android Studio项目文件, 你可以使用Android Studio工具导入这个项目, 然后直接部署在你的模拟器或者真机上. 如果是前端开发人员, Studio玩的不熟的话, 官方文档建议运行如下命令进行部署:
react-native run-android
但是作为Android开发人员, 我觉得此命令不好控制, 万一运行失败不好调试, 所以还是直接用Studio运行比较靠谱.
如何运行项目
1 . 必须启动ReactNative服务器.
首先进入项目根目录, 按住shift键,然后点击鼠标右键, 选择打开命令行窗口(你可以在命令行中切换到项目根目录):
1480497462433.png
然后调用如下命令启动服务器:
react-native start
启动后界面如下所示:
1480497551055.png
可以用浏览器访问 http://localhost:8081/index.android.bundle?platform=android 看看是否可以看到打包后的脚本。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度条.
2 . 使用Studio导入项目, 然后运行在模拟器上
这是导入项目之后的结果:
1480497646105.png
摇晃设备或按Menu键:
（1）可以打开调试菜单，点击Dev Settings
1480498139616.png
（2）选Debug server host&port for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦）, 如果是Genymotion模拟器,可以直接写成10.0.3.2:8081, 如果是原生模拟器,可以写成10.0.2.2:8081
1480498283601.png
（3）再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
1480498327424.png
3 . 如何修改页面内容
ReactNative在Android上运行的程序可以认为就是一个壳子或者容器, 真正的内容来源于服务器上的网页(实际上是个js文件), 这个js文件就是index.android.js
1480499270200.png
所以, 如果你想修改页面的显示内容, 只需要修改index.android.js文件就可以了, 不需要再动Android项目里的任何代码了.
既然这样, 那么我们的app也就只需要在模拟器或真机上部署一次, 以后如果要修改了js文件, 只需要Reload一下就可以, 不需要再次部署. 从而大大减少了重新编译代码的时间(经常用Studio开发的同学应该理解这个痛吧)
1480427145920.png
使用什么开发工具
由于以后几乎不用写Java代码了, 基本上都是写js脚本了, 所以开发工具也得换一下了. 写js脚本的话开发工具就选择性比较大了, 有些哥们用vim来搞, 有些用记事本来搞. 当然, 我们为了提高效率, 并适当得到部分提示和高亮显示, 还是不要搞那么原始了. 目前前端开发人员用的比较火的软件叫做Sublime, 可以推荐给大家.
1480500072319.png
下载地址: http://pan.baidu.com/s/1skUPPMX
这是一个免安装版, 可以直接运行.
