React Native 路线
基本路线如下:
1.详细了解 JavaScript
2.详细了解 React
3.详细了解 React Native
4.其他(比如说 Redux)
JavaScript
了解 JavaScript 的继承和原型链机制,同时包括 JavaScript 的对象模型。
参考资料:JavaScript_MDN,ECMAScript6 入门,JavaScript文档
从 MDN 的 JavaScript 教程开始学习,这是 JavaScript 的基础知识,有一定编程经验在初级部分可以看的快一点,关于JavaScript 对象入门、继承与原型链、对象模型的细节要着重详细的看。如果跳着看思路跟不上,可以从头到尾仔细的看一遍。 MDN 的教程看完之后后就可以看 ES6 相关内容了。可以看 ruanyifeng 的 ES6 网上教程,也可以看 MDN 的JavaScript指南,两者可以对比的看。关键要理解 ES6 的模块(Module), 重点:Module语法 和 Module 的加载实现和基本的 ES6 语法。在看的过程中有些内容可能不懂,可以跳过,在写代码或碰到相关代码碰到的时,回过头来看,记住有这么一个东西即可。也可以对比一下与其他语言在这方面的不同和相同(lg: Java 程序员,学习 JavaScript,就可以对比一下 Java 的继承和 JavaScript 的继承),同时可以加深你对 JavaScript 的理解。
看完这些 JavaScript 已经入门了。JavaScript 是弱类型语言,代码写着写着就不知道当前函数的参数定义是什么。不知道一个东西确定是什么是很痛苦的(你可以想象一下.....)。TypeScript 是微软的一个比较流行的解决这类问题的方案,是给 JavaScript 加上 类型。如果你碰到类似问题,TypeScript 就是你的解决方案。
React
根据 React Native 的官方文档来学习。了解 React 是很关键的。喜欢立即上手的人,可以先不看 React 相关的内容,直接学习 RN。但写了一定量的代码以后,会碰到一些问题(如何复用组件,如何处理一些不是很常见的操作,如何处理数据等等),这时候你就可以开始去了解 React 了。
了解 React 当然是官方文档:
内容是一样的。
(建议:能够全部看完所有内容,不要忽略任何一个地方,当然文档是不够的,我觉得有时间一定要理解一下 React 的实现原理)
React Native
强调一下,学习 RN 可以先不了解 JavaScript 和 React(前提是你要有一点编程经验,如果是大神的话,请随意)。喜欢立即上手的可以直接根据官方文档上手,不过要深入了解 RN,则必须要了解 React 和 JavaScript。
RN 关键了解使用的部分如下:
FlexBox :一个前端布局的方式,写界面的时候一定要了解,否则界面就构建不出来各种 UI 组件的使用、属性等,可边写代码边使用
网络请求 : 所有的客户端都有网络请求,所以这个也很关键。有一个框架 axios 可以尝试使用,这是一个 HTTP 客户端框架如何与(原生代码交互,iOS 相关文档地址 iOS Native Modules、iOS Native UI Components,Android 相关文档 Android Native Modules、Android Native UI Components)。
数据存储:使用 RealmJS 或者原生的 AsyncStorage,使用 RealmJS 的问题是,如果你的 iOS 原生项目已经使用了 RealmSwift 等的话,会导致符号冲突,无法通过编译。(坑:建议在原生项目上添加 RN 支持,文档地址集成到现有原生应用。如果使用 create-react-native-app AwesomeProject 命令来生成一个 RN 项目,会引入 Expo 这种东西,不建议使用此类框架。不建议使用 NavigatorIOS 这类组件,推荐 React Navigation,但是这个开源组件坑也比较多,不过个人认为还是比 RN 提供的组件要好)。其他Redux,Redux 是一个关于数据流的前端框架,也可以用在 RN 中。其他还有类似的比如 MobX(据说新版 React 有种 Context API 可以让我们告别使用 Redux,应该是比较新的东西)。
开始可以不使用 Redux,Redux 的官网也提示说如果不知道要不要使用 Redux,则不要使用 Redux。
学习文档:Redux 英文官方文档(中文版)
理解 Redux 比较关键的是它的状态树,所有的操作最终会反应到状态树上,所有的操作也是围绕状态树展开来的。所以一开始做客户端的时候设计一个比较贴切的状态树很关键。
进阶
1)打包
2)热更新
3)与原生交互
4)RN 原生实现原理
参考资料:
开发环境
1.Atom(卡)2.Visual Studio Code (配置 TypeScript 环境,demo)
注意:
需要掌握RN的要求还是有一定知识度的,既要了解前段的相关知识,又要了解Android和iOS的原生知识。纯 JavaScript 的 RN 项目不现实,建议原生使用RN,不要以RN为主。不建议使用其他类似 RN 的解决方案,比如说 Weex。 RN 的生态环境是很活跃的,GitHub 有很多开发者共享的开源代码,很多人也在 GitHub 和 stackoverflow 上讨论自己碰到的 RN 相关的问题。但是即使如此,RN 还是没有出 1.0 版本,而且在实际使用过程中经常要自己造轮子,也会碰到很多奇奇怪怪的问题,导致拖累开发速度,从学习角度不是问题,但是工作就不一样了。所以使用 Weex 情况可能更糟糕。
conclusion:
React Native的学习过程更像是在学习React的前端开发,最大的区别就是浏览器和移动设备而已。但是换个角度来想,原生移动势微的情况下,从React Native入手前段开发也不错。在学习当中结合自己相关的开发知识,对比React Native,能更快巩固React Native相关知识,也加强了对自己的知识点加深。