给所有开发者的React Native详细入门指南

96
Marno
2017.01.20 15:26* 字数 5449
  • 本文为 Marno 原创,转载必须保留出处!
  • 公众号【 aMarno 】,关注后回复 RN 加入交流群
  • React Native 优秀开源项目大全:http://www.marno.cn

建议先下载好资料后,再阅读本文。demo代码和资料下载

目录

前言


从最开始开始接触 React Native(以下简称 RN),到写下第一篇博文后,就再也没有写过相关的文章了,随着微信小程序的正式发布,其实也又一次将一个概念推到公众面前,那就是全栈式前端,这是个什么概念呢?大概意思就是一个人可以同时写 Android、iOS、Web 程序。可能民间不乏一些大神 Java、OC、Swift、JS 都写得特别好,但我相信大部分人还是和我一样,毕业后只从事一个方向的开发,所以要成为全栈式前端有比较大的困难。

但是随着发 RN 布,这一切似乎变得有了可能。这也是随着社会进步不断要求生产力提高后导致的必然发展趋势。虽然这个概念早在RN前就有了,但是之所以能在这个时间火起来,那就说明时候到了。像手机上的指纹识别一样,并不是苹果第一个集成到手机上,但却是苹果把它用在了最正确的时代。现在连几百元的手机都有指纹识别了。所以如果去年你没有去关注去学习RN 不要紧,但是随着微信发布小程序,这再次说明了全栈式前端是一个趋势,如果你还没有趁机上车,那……那其实也没啥,一门心思写好 Android 其实也是可以的,毕竟专才也是要有的!

哈哈~前面说的有点危言耸听了,但还是希望那些学有余力、热爱并关注前端开发的人能早点搭上这趟车。虽然目前RN还有很多问题,比如首当其冲的就是性能问题,但是随着版本的不断迭代,我相信这个问题迟早会被解决的。你问我那是什么时候?现在RN版本是 0.40,会不会是 1.0 发布的时候呢?哈哈~这个谁能知道呢,但是有生之年肯定会的!说了这么多,让我们正式发车吧!

二、回答一些问题


  • 为什么写此教程

首先主要是出于我们公司业务发展上的要求,并且我对 RN 开发很感兴趣,因为它确实可以提高生产力,所以公司就指派我负责这次 RN 在公司移动端内部的推行。其次是苦于网上虽然关于RN资料很多,但是却没有一个比较系统的学习方案,看视频课程又觉得效率太低,这也导致我在学习RN的过程中浪费了大量的时间去搜集资料。所以我想写一篇文章记录一下我的学习过程,将我从零开始的入门学习心得和大家分享一下。目的就是为了让更多想学 RN 的人,不用再东奔西走的把时间浪费在搜集资料,能够快速的入门进行学习。

  • 本文适合哪些人看?

1.热爱前端开发,并且总想开发一些能看得见的东西
2.对 RN 有着像对女朋友一样的兴趣,愿意去了解他
3.可以不懂 Web 开发,但最好有一定 Android 或者 iOS 开发经验。
4.对 RN 完全不了解的新人(如果是RN老司机不巧看到了这篇文章,我想说...哥,收徒么?我骨骼精奇,是个码代码的好手...哥....诶....别走啊....我还跪着呢!)

  • 如何使用本教程?

看!多看!反复看! 敲!多敲!反复敲!
嘿嘿~说正经的,必须要结合我给出的 Demo 中的代码一起看。而且我会附上我在学习过程中梳理的思维导图文件,可以结合起来和文章一起看,这样学习的思路会更加清晰一些。

  • 需要先学习 JavaScript、HTML、CSS 么?

HTML 和 CSS 没什么要求,略懂就行,不懂也无所谓。但是JS还是要懂一点(卧槽,“一点”是多少?就和菜谱里的盐少许一样难以琢磨)。好吧,我再说详细一点。把阮一峰老师的《 ECMAScript 6 入门》这篇关于ES6的文档花一周时间详细看一下其实就差不多了。至于 JS 里涉及的一些其他特性,闭包什么的,后面入门了再研究也可以。包括 ES7 关于网络请求写法的变化,我们也可以先不用管。

  • 如何编写demo

是不是我们编写每一个知识点的demo都要通过 react-native init XXXX 的方式去新建一个项目呢?当然不是,我们可以把所有代码都写到一个demo里,并通过分包进行管理(app的文件夹是自己创建的,名字自定),这样自己看起来也比较方便。然后每个 demo 都通过 import 的方式导入到 index.android/ios.js 文件中进行使用。


  • 保不保证学习效果?

怎么不问我包不包就业呢?

三、章节内容(预计用时:9.5~14.5天)

1.内容简介


1.1)本教程共分为三个阶段,第一阶段主要是带大家入门,熟悉一些 RN 基础组件、JS 语法等等。该阶段结束后,基本可以搭建一个 App 框架了,甚至可以写一些简单的新闻类 App,在该阶段的教程中我仿写的是【开眼v3.1.2】。

1.2)本文中有大量的内容来自各家博客,所以出于对原文作者的尊重,我会直接给出原文链接并附上作者名字,如果看到对应的章节,请大家跳转到相应的网址去看一下。现在网上关于 RN 的文章太多,看的眼花缭乱结果却往往不容易形成体系,所以我只整理了一些必须的内容,而且相关的内容看我推荐这几篇文章基本也就够了。

1.3)在开始第一阶段的学习前,先来看一下完成这个阶段的学习后,我们大概能做出一个什么效果来。希望借此也能给你一些学习的动力吧!上图(被压缩太厉害了,凑合看吧)!


2.环境搭建(预计用时:1~2天)


按照RN中文社区的指导就可以了。不过过程中会遇到一些坑,我也附上我的踩坑记录。我建议大家可以先看一下踩坑记录,然后再开始安装环境。

2.1) 环境搭建踩坑指南:《一起学》安卓 React Native 开发--踩坑大全(持续更新...)
2.2)环境搭建中文教程,点击跳转RN中文社区
2.3)开发工具安装和配置 :

本文中使用 WebStorm 进行开发,也有人用 Atom 或 Sublime,对此我想说:赶快换 WebStrom 吧。为了不牵扯什么不必要的问题,下载地址我就不贴了,自行破*解吧。我最多只能说一下我用的是下面这个版本的。


安装好 WebStorm 后,为了更便捷的去开发,我们需要安装一些插件,以及进行一些常用配置。比如RN组件库的安装,添加一些常用的Live Templates等,下图是我添加的两个比较常用的,给大家参考一下,至于如何添加 Live Template 大家可以自行百度一下,比较简单,我就不过多赘述了。
《[React Native]去掉WebStorm中黄色警告》——于连林520wcf

配置Live Templates
配置Live Templates

3.Hello World(预计用时:0.5天)


不教大家写 Hello World 的教程,不是好教程!千万注意!【要看注释】哈!不然会很坑!

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello World!</Text>
    );
  }
}

// 注意,这里用引号括起来的 'HelloWorldApp' 必须和你 init 时创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

4.了解 index.android/ios.js


index.android.js 和 index.ios.js 分别作为 Android 手机和 iOS 手机上程序开始的入口,所以我们先来了解一下这个文件的结构。

1)组件导入区: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入
2)核心代码区:所有逻辑代码编写的地方
3)组件样式区:render() 方法中用到的组件的样式,可以集中在这里编写
4)注册启动组件:组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入


5.Flex布局(预计用时:2~3天)


Flex 布局是 Web 开发必备的技能,如果你是 Web 开发人员,可以直接跳过该部分内容。但是也需要注意的是 Web 中的一些属性在 RN 中是没有的,而且属性命名是通过小驼峰的方式进行命名的。后面我会附上我自己整理的关于 RN 组件支持的属性大全。可能不完善,但是常用的应该是有了。如果 Flex 布局没有练熟,还是不要看后面的了,所以请多花点时间在这里,甚至可以自己找一些比较有难度布局进行练习。

6.网络请求(fetch)(预计用时:2~3天)


1.如果 Flex 布局你已经练习的比较熟练了,那我们来学习一下网络请求。其实现在的 App 大多都比较简单,无非就是布局的展示,网络数据的获取等等。如果搞定这两块内容,那我们至少会从 RN 的学习中获取一些成就感了,也才有继续下去的动力。

2.这里要说明的是,如果你是 Android 或 iOS 工程师,那你需要习惯一下 RN 处理 Json 数据的方式(或者说 Web 处理 Json 的方式),我们通过网络请求回来的 Json Object 数据就可以直接进行操作,而不像 Native 开发,还需要通过什么额外的工具去进行 Json 的转换。这也是 Web 开发比较方便的地方。无论 Json Object 转 Json 字符串,还是 Json 字符串转 Json Object,都是非常方便的。如果非要把网络数据进行本地存储,那也很方便,通过解构赋值,直接就可以赋值给你创建的 Model 了。

看完上面两篇只是先了解一下 Fetch 的概念,不然后面的内容你会是懵逼的状态。

网络请求结束后,肯定是少不了数据的展示和更新,这时又会涉及到一个很重要的知识点,就是【props】和【state】,RN中所有数据的传递和控制,都离不开这两个部分。所以请务必在发起网络请求前就要搞懂这两个内容

接下来我们就可以开始愉快发起网络请求了,这里可能会用到箭头函数,这是 ES6 里面的语法(类似 Android 里面的 Lambda 表达式吧)。如果你是从文章的开始看下来的,那我相信你肯定已经看过在文章最开始我推荐的关于 ES6 的内容了,所以这里也不会有什么问题了

这里只涉及了简单的 fetch 用法,至于一些高级的用法,我们后面再讲。
如果看了 demo 中的代码还不明白如何进行网络请求的,那可以再看一下下面这篇文章。

7.三方库的使用(预计用时:2~3天)


如果你已经看到了这里,说明你已经可以成功的发起网络请求,并且展示到了界面上。万里长征我们这才算是踏出了第一步。为了增强学习的成就感,所以我在这里就加了一个关于三方库使用的学习。一些成熟的轮子,能更快的帮助我们搭建出一个常用 App 的原始框架,会让我们有继续学习的动力。这里我挑选了几个比较典型常用的框架进行演示。

1)首先是如何引入或删除一个 node 模块

2)几个常用框架

tab类 banner类
1. react-native-tab-navigator (使用较简单) 更适合作为底部的 tab,使用方式也超级简单 1. react-native-swiper
2. react-native-scrollable-tab-view (star 最多的 tab 类控件) 更适合作为顶部的 tab,类似今日头条中的效果 2.react-native-banner (这个是基于 react-native-swiper 的)
备注:教程的 demo 中只提供了 react-native-tab-navigator 的代码【戳这里】,如果你已经下载了我整个 HelloRN 的项目,那代码就在 app/eyepetizer_demo/MainPage.js 中。不过我也使用过一些其他的,而且还试了很多种,具体可以看一下我 demo 中的 package.json 就知道了。不过还是这个最易用。相对稳定一些 备注:demo 中使用的是 react-native-banner【戳这里】,使用比较简单。如果你已经下载了我整个 HelloRN 的项目,那代码就在 app/03_library_demo/BannerTest.js。中并不是因为 swpier 怎么样,而是我先找到 banner,后面就懒得换了。目测 swiper 可以实现的功能就比较多了,比如引导页之类的,而且使用人数也更多,大家可以尝试一下 swiper。

加入这两个库后,我们的 demo 看起来是不是就有点像一个 App 了呢?



3)一些综合框架

当然我们也可以选择一个综合的框架进行集成使用。demo 中我使用了 native-base 框架。但是该框架在我使用过程中发现还是有很大局限性,而且还有一些 bug。至于 UI-Toolkit,按照官方的方式我尝试了很久并没有安装成功,不知道是什么原因,希望有安装成功的朋友可以回复一下。肯定会有人问那我究竟要使用哪一个框架,我觉得最开始入门学习的时候,最好都加进来试着使用一下,这样后面我们才能知道如何去取舍。

8.滚动视图(2~3天)

看完上面三方框架的使用后,我相信你对RN的学习又有动力了!那接下来的内容会让我们的 Demo 更加的像一个 App 了。现在的 App 基本都离不开列表数据展示,所以接下来的内容就让我们一起学习一下滚动视图的使用。在 RN 中滚动视图包含两部分的内容【ScrollView】和【ListView】。

8.1 ScrollView

其实和 Android 中的 ScrollView 一样,如果包含在 ScrollView 的组件超出屏幕范围后,就可以对内容进行滚动。而且 ScrollView 可以设置竖向或者横向的滚动。还有一些其他属性,具体可以看下面的内容。

8.2 ListView

在 RN 中的 ListView 其实是继承了 ScrollView 的,这导致目前RN有一个比较头疼的问题,就是列表的性能问题,不过还好网上有很多关于 RN 性能优化的文章,但是我建议还是等我们对RN有一定了解以后再看不迟。目前只要知道是有解决方案的就可以了!

8.3 RefreshControl(下拉刷新)

这里我只讲述一下原生下拉刷新 RefreshControl 的使用,该组件支持 Android 和 iOS,但是在两个平台上的呈现方式不太一样。支持 ScrollView 和 ListView 组件的刷新,使用也很简单,直接看代码。

讲到这里就需要大家特别注意了,RefreshControl 刷新结束后是需要通过 setState 方法手动更改刷新状态的。所以这里我们就会涉及到另一个概念【状态管理器】,相信你自己在尝试入门 RN 前就在很多文章中看到过Redux,但是完全不理解这是个什么东西,导致很多人一头雾水。包括我也是,刚开始就给我说什么Redux我是完全懵逼的。

但是学到这里的时候我终于可以理解了为什么需要这样一个东西了,因为有太多的【状态】需要我们去管理了。如果完全手动管理,状态多了就会很恼火。所以 Redux 就是一个东西帮助我们更好的管理这些状态工具,至于如何使用 Redux 我们在后面的阶段中再去细说。

当然如果你愿意,也可以找一些三方的组件来使用,进而做到在 Android 和 iOS 上的刷新体验一致。我找到一些可以同时兼容两个平台的带有下拉刷新功能的组件,大家也可以都试一下。至于孰优孰劣,我都没用过,所以不好说,但是附上 star 数,至少可以给你一些参考吧。

8.4 上拉加载

官方并没有提供这样的组件,只能通过自己去实现,照着网上的教程我尝试了一些方式,但是感觉都不是特别满意,效果比较生硬。所以这部分内容暂时空缺,后面在完善。不过上面在下拉刷新那一节中提到的 react-native-gifted-listview,可以支持上拉加载更多。如果有需要,可以集成该框架进行使用。

9.总结

之所以分阶段去写这篇文章,是想大家都可以循序渐进的系统的去学习RN,而且在每个阶段都可以有一些成就感。我可以简短的称之为【成就感学习法】么?不知道有没有这样一个词语,反正我觉得学习过程中的成就感是特别重要的。经过这个阶段的学习,如果你对RN还有兴趣,再去进行第二阶段的学习 ,如果到现在还是懵逼的状态,我劝你要不还是放弃好了,就一门心思的去做好 Andorid、iOS 或 Web也是挺好的,嘿嘿~



React Native 开发阵营