iOS 和 Android 开发的 React Native 入门指南

前言

这一篇是给稍微有点原生(iOS 或者 Android)编程经验的人的一个系统性的 React Native 入门指南。主要总结的是我之前系统学习 React Native 的经验。

我在很早的时候就接触了 RN,但是刚开始那段时间基本处于一种瞎写的状态,不知道很多内在原理,导致我碰到问题各种谷歌、StackOverflow,搜代码,拷贝粘贴代码。然后又荒废了一段时间,今年开始又重拾 RN,有了之前的经验,这次是比较系统的学习了。

先介绍一下我的情况:我是原生 iOS 开发,Objective C 3年经验,Swift 2年经验。

路线

基本路线如下:

  1. 详细了解 JavaScript
  2. 详细了解 React
  3. 详细了解 React Native
  4. 其他(比如说 Redux)

下面详细介绍。

JavaScript

关键是了解 JavaScript 的继承和原型链机制,同时包括 JavaScript 的对象模型。

参考资料如下:(参考资料如果包含浏览器相关的内容,可以忽略)

  1. MDN JavaScript
  2. ECMAScript 6 入门 或者 JavaScript 指南
  3. TypeScript 英文文档中文版文档

先从 MDN 的 JavaScript 教程开始看,这是 JavaScript 的基础,有一定编程经验在初级部分可以看的快一点,但是关于 JavaScript 对象介绍继承与原型链对象模型的细节 要详细的看。

如果没有头绪,或者觉得跳着看思路跟不上,可以从头到尾细看(我就是这么看的,但是我看的比较快,花了2天时间看完)

看完 MDN 的教程以后就可以看 ES6 相关内容了。我看的是 ruanyifeng 的 ES6 网上教程,不过也可以看 MDN 的 JavaScript 指南,两者可以对比的看。我是看完 ruanyifeng 的教程之后又看了 MDN 的 JavaScript 指南,由于看过 ruanyifeng 的 ES6,所以 MDN 的 JavaScript 指南就可以快一点。我觉得这里比较关键的是理解 ES6 的模块(Module),也就是这两章:Module 的语法Module 的加载实现
,还有就是基本的 ES6 语法。

在看的过程中有些内容可能不好懂,完全可以跳过,等后面写代码或者看代码碰到的时候再回过头来看,只要记住有这么一个东西即可。有些内容比较好懂,或者理解一下就懂了,这时候可以对比一下和其他语言在这方面有哪些不同和相同(比如你是 Java 程序员,学习 JavaScript,就可以对比一下 Java 的继承和 JavaScript 的继承),这样子可以加深你对 JavaScript 的理解。

看完这些其实 JavaScript 已经入门了,不过我要特别提一下 TypeScript。由于 JavaScript 是弱类型语言,经常代码写着写着就不知道当前函数的参数定义是什么。无论是 debug 还是阅读代码、写代码,不知道一个东西确定是什么是很痛苦的(你可以想象一下你写的一个函数,有一个参数,但是却无法确定类型是什么,所以需要时刻在脑海中告诉自己这个参数的定义是这样的,但是一不小心疏忽了,编辑器也没有提醒你这里写的有问题,那只能在运行时发生问题才知道出了问题,然后又要花一段时间去调试)。TypeScript 是微软出的一个比较流行的解决这类问题的方案,就是给 JavaScript 加上 Type (类型)。你也可以在一开始不用 TypeScript,但是等到你碰到很多上面提到的类似问题时,TypeScript 就是你的解决方案。

React

我刚开始学习 RN 的时候,对 React 一无所知,直接根据 React Native 的官方文档来学习。但是在越来越深入的写 React Native 相关代码的时候,我发现,了解 React 是很关键的。

对于喜欢立即上手的人来说,可以先不看 React 相关的内容,直接学习 RN。但是在你写了一定量的代码以后,你会碰到一些问题,比如如何复用组件,如何处理一些不是很常见的操作,如何处理数据(展示组件和容器组件)等等,这时候你就可以开始去了解 React 了。

了解 React 当然是官方文档:

  1. React 中文文档
  2. React 英文官方文档

上面两个内容是一样的,喜欢中文的可以看中文,喜欢看英文的可以看英文。

建议能够全部看完所有内容,不要忽略任何一个地方(如果是 Web 开发可以跳着看)。

当然其实看完这文档是不够的,我觉得有时间一定要理解一下 React 的实现原理。(我没有看过 React 源码,所以就不继续说了)

React Native

说了那么多终于到 RN 这一部分了。还是要强调一下,学习 RN 可以先不了解 JavaScript 和 React,(前提是你要有一点编程经验,如果是大神的话,请随意)喜欢立即上手的可以直接根据官方文档上手。不过要深入了解 RN,则必须要了解 React 和 JavaScript。

学习 RN 的时候主要就是看 官方英文文档中文版),一些环境依赖等根据官方文档来操作即可。

RN 需要关键了解使用的部分如下:

  1. FlexBox,一个前端布局的方式,写界面的时候一定要了解这个,否则界面就写不出来
  2. 各种 UI 组件的使用、属性等,可以一边写代码一边学习使用
  3. 网络请求,大部分 app 都会有网络请求,所以了解这个也很关键。有一个框架 axios 可以尝试使用,这是一个 HTTP 客户端框架。
  4. 如何与原生代码交互,iOS 相关文档地址 iOS Native ModulesiOS Native UI Components ,Android 相关文档 Android Native ModulesAndroid Native UI Components
  5. 数据存储,使用 RealmJS 或者原生的 AsyncStorage,使用 RealmJS 的问题是,如果你的 iOS 原生项目已经使用了 RealmSwift 等的话,会导致符号冲突,无法通过编译。

一些坑:

  1. 建议在原生项目上添加 RN 支持,文档地址集成到现有原生应用。如果使用 create-react-native-app AwesomeProject 命令来生成一个 RN 项目,会引入 Expo 这种东西,我个人不建议使用此类框架。
  2. 不建议使用 NavigatorIOS 这类组件,推荐 React Navigation,但是这个开源组件坑也比较多,不过个人认为还是比 RN 提供的组件要好。

其他

Redux,Redux 是一个关于数据流的前端框架,也可以用在 RN 中。其他还有类似的比如 MobX(除此之外据说新版 React 有种 Context API 可以让我们告别使用 Redux,不太清楚,应该是比较新的东西)。

先说一下,一开始可以不使用 Redux,Redux 的官网也提示说如果不知道要不要使用 Redux,则不要使用 Redux。

学习自然要根据文档来:Redux 英文官方文档中文版

理解 Redux 比较关键的是它的状态树,所有的操作最终会反应到状态树上,所有的操作也是围绕状态树展开来的。所以一开始做 app 的时候设计一个比较贴切的状态树很关键。

进阶

  1. 打包
  2. 热更新
  3. 与原生交互
  4. RN 原生实现原理

参考资料有如下:

  1. React Native拆包及热更新方案
  2. 携程是如何做React Native优化的
  3. 微软的热更新方案 CodePush
  4. ReactNative中文网推出的代码热更新服务
  5. iOS Native Modules
  6. iOS Native UI Components
  7. Android Native Modules
  8. Android Native UI Components
  9. React Native通信机制详解

开发环境

我使用 Visual Studio Code,不建议使用 Atom(很卡)。并且配置了 TypeScript 环境,配置参考 demo 地址: https://github.com/Microsoft/TypeScript-React-Native-Starter

注意事项

个人觉得 RN 的要求其实很高,不仅要了解前端开发相关内容,还要了解 Android 和 iOS 的原生内容。一个纯 JavaScript 的 RN 项目不太现实。所以建议在原生项目上使用 RN,不要使用纯 RN 项目。这对于理解 RN 也有一定帮助。

不建议使用其他类似 RN 的解决方案,比如说 Weex,当然我并没有了解过 Weex。我想说的是 RN 的生态环境是很活跃的,GitHub 有很多开发者共享的开源代码,很多人也在 GitHub 和 stackoverflow 上讨论自己碰到的 RN 相关的问题。但是即使如此,RN 还是没有出 1.0 版本,而且在实际使用过程中经常要自己造轮子,也会碰到很多奇奇怪怪的问题,导致拖累开发速度,从学习角度不是问题,但是工作就不一样了。所以使用 Weex 情况可能更糟糕。

总结

学习 React Native 的过程其实更像是入门 React 前端开发,区别就是代码环境从浏览器变成了移动设备。

在原生移动开发势微的今天,从 React Native 切入来了解前端开发也很不错。在学习的同时,结合自己已有的原生开发经验,对比 React Native 开发,更能在巩固 React Native 相关知识的同时对加深原生开发的理解。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容