此文是以一名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
运行成功后如下图所示:
6 . 搭建Android Studio 2.0+开发环境, 作为Android开发人员, 这个步骤应该已经非常熟悉, 我不做过多介绍
7 . 项目初始化(此操作需要翻墙执行, 这个命令会初始化一个工程、下载React Native的所有源代码和依赖包)
react-native init AwesomeProject
运行成功后命令行如下所示:
下载下来后目录结构如下所示:
注意: 此命令即使在翻墙情况下失败率也是比较高的, 尤其在国内网络很不稳定, 所以一定要保持耐心. 如果运行出错, 很有可能就是网络原因, 而不是你的命令出了问题.
8 . 部署项目
作为Android开发人员,需要进入android目录进行相关操作:
从这个目录可以看出, 这是一个典型的Android Studio项目文件, 你可以使用Android Studio工具导入这个项目, 然后直接部署在你的模拟器或者真机上. 如果是前端开发人员, Studio玩的不熟的话, 官方文档建议运行如下命令进行部署:
react-native run-android
但是作为Android开发人员, 我觉得此命令不好控制, 万一运行失败不好调试, 所以还是直接用Studio运行比较靠谱.
如何运行项目
1 . 必须启动ReactNative服务器.
首先进入项目根目录, 按住shift键,然后点击鼠标右键, 选择打开命令行窗口(你可以在命令行中切换到项目根目录):
然后调用如下命令启动服务器:
react-native start
启动后界面如下所示:
可以用浏览器访问 http://localhost:8081/index.android.bundle?platform=android 看看是否可以看到打包后的脚本。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度条.
2 . 使用Studio导入项目, 然后运行在模拟器上
这是导入项目之后的结果:
摇晃设备或按Menu键:
（1）可以打开调试菜单，点击Dev Settings
（2）选Debug server host&port for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦）, 如果是Genymotion模拟器,可以直接写成10.0.3.2:8081, 如果是原生模拟器,可以写成10.0.2.2:8081
（3）再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
3 . 如何修改页面内容
ReactNative在Android上运行的程序可以认为就是一个壳子或者容器, 真正的内容来源于服务器上的网页(实际上是个js文件), 这个js文件就是index.android.js
所以, 如果你想修改页面的显示内容, 只需要修改index.android.js文件就可以了, 不需要再动Android项目里的任何代码了.
既然这样, 那么我们的app也就只需要在模拟器或真机上部署一次, 以后如果要修改了js文件, 只需要Reload一下就可以, 不需要再次部署. 从而大大减少了重新编译代码的时间(经常用Studio开发的同学应该理解这个痛吧)
使用什么开发工具
由于以后几乎不用写Java代码了, 基本上都是写js脚本了, 所以开发工具也得换一下了. 写js脚本的话开发工具就选择性比较大了, 有些哥们用vim来搞, 有些用记事本来搞. 当然, 我们为了提高效率, 并适当得到部分提示和高亮显示, 还是不要搞那么原始了. 目前前端开发人员用的比较火的软件叫做Sublime, 可以推荐给大家.
下载地址: http://pan.baidu.com/s/1skUPPMX
这是一个免安装版, 可以直接运行.