React Native for android 项目驱动教程

第一节 搭建开发环境

第二节 显示页面标题

第三节 实现页面布局

# React native是什么？

React Native，是颠覆性的移动开发技术。它使用js开发，又是原生应用，不同于Hybrid.

简单的理解：它提供一个原生项目，然后规定js与原生项目的接口，编译原生项目，打包程序员编写的js，

共同形成一个完整的应用。

原生项目起引导作用，程序员完全可以不修改甚至不看原生代码，就能正常完成ios和android的编程。

对于前端程序员，这是显而易见的利好，由于是原生程序，性能较Web app提高不少。而对于原来的ios

和android开发人员来说，前端技术的工作效率要高不少，而且一次学习，各处运行，ios和android、web应用

能有共同的代码基础。

对于中小型软件团队而言，这几乎是移动开发的蜜糖，对于整体开发成本的降低、产品线相对的单一化，几乎

是梦寐以求的。

#React Native涉及的知识点

react native涉及的知识点较多，正常情况下，初学者会觉得谁先谁后、谁重要谁必须，分外麻烦。总的来说，按

最佳实践，React、Jsx、Es2015/2016、react native控件和样式是第一步要掌握的，之后基本能完成一般应用的开发。

redux实现的Flux架构，是第二步需要重点关注的，一方面，团队协作需要规范统一代码，另一方面，代码在Web、ios、

android之间甚至服务端复用，redux也是必须的。redux-saga也是要重点关注的。

# 按部就班还是项目驱动？

上面提及的知识点较多，一般情况下，每一项都是复杂的，需要花费大量时间，来正儿八经的学习。不过，这种

按部就班的方式，一向是低效率的。

如同以往，我们将用一个真实小项目的例子，来覆盖全部的知识点，所有相关知识，将在实践过程中，一再出现

并逐步深入。我们每一步都有重点，每一步能看到实际的效果，待任务终结，无需记忆，相关的技能就已经渐渐熟练。

这只是一种期望，若后面教程中有错漏或叙述不清的，希望大家跟帖提问，会尽可能及时回复、并修改正文。

教程的目的，如上所述，首先是让相关知识线性化，在项目推进过程中自己浮现。另一个目的，是只需要最基本的

js或C的基础，甚至无需html和css的常识，换个方向来理解，透过使用React Native，反过来再去看Html5/Css3之类，

相反更为简单，是一种逆行的也是极为经济的方式。

# 第一个用户场景：写笔记

1. 用户记录一些内容
2. 用户要求保存
3. 系统保存笔记

这是最简单的用户场景，我们以此来讲述react的组件、样式、布局、事件。

# 第一页的界面设计：

顶部为导航区：包括居中的标题，左边的返回按钮，右边的保存按钮
下方为编辑区，包括一个编辑控件
导航区高度固定，编辑区占用剩下的高度。两者均与屏幕同宽。