React Native for android 项目驱动教程
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的组件、样式、布局、事件。
# 第一页的界面设计:
顶部为导航区:包括居中的标题,左边的返回按钮,右边的保存按钮
下方为编辑区,包括一个编辑控件
导航区高度固定,编辑区占用剩下的高度。两者均与屏幕同宽。
React Native for android 项目驱动教程的更多相关文章
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...
- React Native for Android 学习
前言 Facebook 在2015.9.15发布了 React Native for Android,把 JavaScript 开发技术扩展到了移动Android平台.基于React的React Na ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- React Native 系列(三) -- 项目结构介绍
前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...
- React native 之android的图标和启动图片
哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...
- react native 调用Android原生方法
来源:https://www.youtube.com/watch?v=WmJpHHmOKM8 教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaki ...
- React Native 在现有项目中的探路
移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- React Native for Android on Windows 配置开发安装总结
配置开发安装总结(由于当前react-native更新较快,目前是针对2015年11月底时的reacti-native android for windows版本,有些内容可能过时) 官方的安装指导在 ...
随机推荐
- This 关键字和变量作用域
public class Number { int count; public void method01(){ // int count=3; count=3; // t ...
- FZU Problem 1686 神龙的难题 重复覆盖
题目链接 给出大矩形的长宽, 矩形里面有1,0两个值, 给出小矩形的长宽, 求用最少的小矩形覆盖所有的1. 重复覆盖的模板题. #include <iostream> #include & ...
- 【LeetCode题意分析&解答】42. Trapping Rain Water
Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...
- (iOS)Storyboard/xib小技巧
1.选择被view覆盖住的view 当你想直接在view中选择自己想要的元素时,但是又碍于一个view上叠加的元素太多很难直接选中,那么在这时,你同时按住键盘上的shift和 control键,然后在 ...
- PCB成型製程介紹
PCB成型製程在電子構裝中所扮演的角色 下圖是電腦主機的內部組成 我們將以插在主機板上的一片 USB擴充卡來說明PCB成型製 程在電子構裝中所扮演的角色 PCB成型製程的子製程 USB擴充卡要插入主機 ...
- [转载]HDFS的'Block'和MapReduce的'Split'之间的关系和区别
http://www.cnblogs.com/xuxm2007/archive/2011/09/01/2162011.html hadoop的分块有两部分,其中第一部分更为人熟知一点. 第一部分就 ...
- speex 回声消除的用法
speex 回声消除的用法 分类: speex AEC 回声消除 2012-11-13 11:24 1336人阅读 评论(0) 收藏 举报 speex的回声消息 就是speex_echo_cancel ...
- 搭建一个Oracle到Oracle的Goldengate双向复制环境
目标:搭建一个Oracle到Oracle的Goldengate双向复制环境(支持DDL+DML). 环境: OS:Red Hat Enterprise Linux Server release 5.5 ...
- Java 日期字符串与日期类型转换
1.SimpleDateFormat.format 把日期类型转化到指定格式字符串 public static String convToString(Calendar cld,String temp ...
- 简单的Coretext 图文混排
在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我 ...