React Native for android 项目驱动教程

时间:2021-02-01 23:16:06

第一节 搭建开发环境

第二节 显示页面标题

第三节 实现页面布局

# 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的组件、样式、布局、事件。

# 第一页的界面设计:

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