React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP,iOS、Android都有。之前都是用Native开发的,但是2016的这一次是用React Native开发的。
FB开源了RN的App
这次fb不仅开源了纯RN写的App,而且一同发布的还有开发这个App的教程。FB承诺会不断的更新这个app。教程放在make it open。不幸的是这个站点居然被墙了!!!技术博也能被墙,心中跑过一万个草泥马!!!F8的App可以在app store和google play下到。不要着急下,我么先一睹F8的风采。
App的设计本身是没的说,而且两个平台的App都遵守了各自平台的设计规范。iOS的用底部的Tab bar,Android的用了侧边划入的菜单。Android的还没来得及用,在低版本、低配置的Android设备上尤其能反映出RN的性能如何。
facebook在F8教程中提到在fb的内部团队使用了RN后,app有大约85%的代码是可以重用的。这是着实减少了很多的开发量。而且使用RN可以快速的开发出app原型。
RN应用处理数据
在应用的开发中少不了需要处理一些数据。F8 使用了Parse实现了后端的功能。Parse很适合作为对数据依赖不那么强的应用的后端。具体Parse如何使用,各位可以查看文档。我们集中讨论RN应用。
一直以来RN都被认为是MVC模式里处理“View”部分的。但是React本身的特点又让这些略有改变。几个React组件组成了一个view,每一个组件内部都可以包含一些逻辑处理的代码。而这些逻辑处理的代码本来应该是由controller来处理的。
React提供了一种开发模式Flux。RN里就可以使用了Flux模式的最佳实践库Redux。Redux引入了Store的概念,提供了一个新的修改state的工作流,扩展了React的数据关系。你可以参考Flux如何使得React应用实现单向数据流的。
F8有一点需求,需要可以离线使用。正好Redux提供了可以存储和缓存方面的功能。用fb教程的话来说:“Redux提供了功能和易用的最佳平衡”。
其他
很多的公司虽然使用了React,但是没有使用Flow。这里有填坑番外来介绍flow的使用方法。Flow是fb为了保证js开发的时候能尽早,尽可能多的发现错误而开发的一款开源工具。
有很多的js错误,你不需要在代码运行起来以后才发现错误。只要几个flow命令就可以检测出来。如果使用Nuclide,这个React专用的开发工具的话,Flow会在你写完代码之后就给出提示。非常有帮助。
最后
这些应用开发的只是,以及开发对于开发一款React Native应用都有非常大的帮助。F8是一个开发和几个帮忙的设计开发出来的App。其中所使用的开发知识,第三方库和开发工具对于开发React尤其是React Native应用来说不是必不可少、也是非常有益的。学习掌握他们对于我们以后的开发都是大有裨益的!
React Native填坑之旅--重新认识RN的更多相关文章
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- React Native填坑之旅--组件生命周期
这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
- React Native填坑之旅--ListView篇
列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native填坑之旅--Button篇
从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...
- React Native填坑之旅 -- 使用iOS原生视图(高德地图)
在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React ...
随机推荐
- Picture Segmentation Using A Recursive Region Splitting Method
首先 区域分割的分割方法 首先得到一个区域,(一般已原图作为第一个区域) 然后得到该区域的直方图,选取最合适的峰值作为阈值,然后选择连接区域,然后把这些区域加入下一步要处理的区域中,然后重复第一步,直 ...
- mvc Razor 视图中找不到 ViewBag的定义
在Razor 视图中,我们有时会看到 ViewBag.Title 下会划一个红线,当鼠标放上去的时候会提示这样的一个错误: 找不到编译动态表达式所需的一种或多种类型,是否缺少引用? 但在项目启动运行时 ...
- div+css的第一个布局
---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- 全球首个全流程跨平台界面开发套件,PowerUI分析
一. 首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...
- javascript全局变量和局部变量
局部变量和全局变量可以同名.不过在函数体内部,局部变量的优先级高于全局变量.需要格外注意:专用于函数体内部的变量一定要用var关键字声明,否则该变量会变成全局变量.因为js是弱类型语言,所以它可以存放 ...
- Android调试小技巧(LogCat不输出、Log自动清空、install时timeout)
问题:有时候明明连接了设备,而LogCat却没有输出 解决方法:在device界面点一下对应设备,使其处于选中状态(它适用于查看手机文件不显示的情况) 问题:前面记录的Log看着看着突然被清空了 解决 ...
- 记一次u盘 无法格式化、0字节、写保护的解决过程
首先各种找方法,下载了一堆烂七八糟的东西都没能解决 后来看了这个链接的文章 http://jingyan.baidu.com/article/6079ad0e5bdec428ff86dbcd.html ...
- 查看Windows服务器登录日志
本文以Windows7系统为例:[控制面板]——[管理工具]——[查看事件日志]——[Windows日志]——[安全].此时在视图窗口应该可以看到登录信息了,如果需要知道具体信息那么可以点击某条记录或 ...
- python实践——批量统计mongodb数据库的集合大小
#!/usr/bin/env python import os,sys list = [] for i in range(3,50): l = os.popen("/bin/echo 'sh ...
- Spring事务管理(转)
1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...