1 动机：公司最近要上RN的项目。
2 要求：同时支持苹果和安卓。
3 选材：豆瓣，因为在补习班的时候就接触了豆瓣的音乐api。这次去看了下电影的api（v2），调用起来很方便，且公开api就够用。
4 流程：启动图，列表页，详情页。
5 说做就做，先去盖一个场地。
6 场地选址：桌面（外国名：Desktop），在mac的终端里进入桌面文件夹(cd ~/Desktop)。
7 起名：DoubanRNDemo。
8 打地基：（从现在开始步骤可以参考facebook的官方教程）。react–native init DoubanRNDemo，这个过程自带圈地功能（新建文件夹）。打地基的过程中，细心的我发现了一段提示，大意是让装一个叫Yarn的东西可以加快这个安装过程，具体参考另外一篇文章：用Yarn加速npm包的安装。
9 进屋：cd DoubanRNDemo。
10 休息下，先吃个苹果🍎：react–native run–ios（命令1）。
11 再歇歇，玩会儿机器人🤖：。。。。。。
12 好吧我承认机器人不太容易玩，得准备一大堆东西，具体参考：在mac上安装android开发环境。
13 这下子可以玩机器人了🤖：react–native run-android（命令2）。
14 同居：玩够了，现在考虑让项目中的苹果代码和安卓代码在一个屋子里愉快的玩耍，这样就可以一份代码重用两次了，这也是react native设计的初衷。现在环顾四周，发现好多屋子：__tests__测试，android是安卓一家子，ios就是苹果的一家老小，这两个可以暂时不用管。node_modules就是初始化时那一坨坨的js依赖（第三方库），我这里看是3万多个文件夹，没错，文件夹。package.json是声明项目依赖的地方。在文件夹中可以看到index.ios.js和index.android.js，就是这两个熊孩子。新建一个js文件夹，写一个总的主页，把自动生成那一坨拷贝进去，然后更改这俩熊孩子里的registerComponent函数的第二个参数，让它返回那个新的主页。最后启动服务器(npm run start)，分别运行两个项目（或者运行命令1，2）。如果看到类似下图的效果，那么恭喜，第一阶段完成了。
网友评论