给全部开发者的React Native详细入门指南（第一阶段）

时间  2019-11-05
标签 全部 开发者 react native 详细 入门 指南 第一 阶段 栏目 职业生涯 繁體版
原文   原文链接
  • 本文为 Marno 原创，转载必须保留出处！
  • 公众号【 aMarno 】，关注后回复 RN 加入交流群
  • React Native 优秀开源项目大全：www.marno.cn

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

目录

1、前言

从最开始开始接触React Native（如下简称RN），到写下第一篇博文后，就再也没有写过相关的文章了，随着微信小程序的正式发布，其实也又一次将一个概念推到公众面前，那就是全栈式前端，这是个什么概念呢？大概意思就是一我的能够同时写Android,iOS,Web程序。可能民间不乏一些大神Java，OC，Swift，JS都写得特别好，但我相信大部分人仍是和我同样，毕业后只从事一个方向的开发，因此要成为全栈式前端有比较大的困难。可是随着发RN布，这一切彷佛变得有了可能。这也是随着社会进步不断要求生产力提升后致使的必然发展趋势。虽然这个概念早在RN前就有了，可是之因此能在这个时间火起来，那就说明时候到了。像手机上的指纹识别同样，并非苹果第一个集成到手机上，但倒是苹果把它用在了最正确的时代。如今连几百元的手机都有指纹识别了。因此若是去年你没有去关注去学习RN 没关系，可是随着微信发布小程序，这再次说明了全栈式前端是一个趋势，若是你尚未趁机上车，那……那其实也没啥，一门心思写好Android其实也是能够的，毕竟专才也是要有的！哈哈～前面说的有点危言耸听了，但仍是但愿那些学有余力、热爱并关注前端开发的人能早点搭上这趟车。虽然目前RN还有不少问题，好比首当其冲的就是性能问题，可是随着版本的不断迭代，我相信这个问题早晚会被解决的。你问我那是何时？如今RN版本是0.40，会不会是1.0发布的时候呢？哈哈～这个谁能知道呢，可是有生之年确定会的！说了这么多，让咱们正式发车吧！html

2、回答一些问题

  • 为何写此教程

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

  • 本文适合哪些人看？

    1.热爱前端开发，而且总想开发一些能看得见的东西
    2.对RN有着像对女友同样的兴趣，愿意去了解他
    3.能够不懂Web开发，但最好有必定Android或者IOS开发经验。
    4.对RN彻底不了解的新人（若是是RN老司机不巧看到了这篇文章，我想说...哥，收徒么？我骨骼精奇，是个码代码的好手...哥....诶....别走啊....我还跪着呢！）java

  • 如何使用本教程？

    看！多看！反复看！ 敲！多敲！反复敲！
    嘿嘿~说正经的，必需要结合我给出的Demo中的代码一块儿看。并且我会附上我在学习过程当中梳理的思惟导图文件，能够结合起来和文章一块儿看，这样学习的思路会更加清晰一些。node

  • 须要先学习JavaScript，HTML，CSS么？

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

  • 如何编写demoandroid

    是否是咱们编写每个知识点的demo都要经过 【react-native init XXXX】的方式去新建一个项目呢？固然不是，咱们能够把全部代码都写到一个demo里，并经过分包进行管理（app的文件夹是本身建立的，名字自定），这样本身看起来也比较方便。而后每一个demo都经过import的方式导入到index.android/ios.js文件中进行使用。
    ios

  • 保不保证学习效果？git

    怎么不问我包不包就业呢？es6

3、第一阶段《相识》（预计用时：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

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的内容了，因此这里也不会有什么问题了

7.三方库的使用（预计用时：2~3天）

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

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

2）几个经常使用框架

tab类

  • react-native-tab-navigator(使用简单)更适合做为底部的tab，使用方式也超级简单
  • react-native-scrollable-tab-view(star最多的tab类控件)更适合做为顶部的tab，相似今日头条中的效果

    教程的demo中只提供了react-native-tab-navigator的代码【戳这里】，若是你已经下载了我整个HelloRN的项目，那代码就在app/eyepetizer_demo/MainPage.js中。不过我也使用过一些其余的，并且还试了不少种，具体能够看一下我demo中的package.json就知道了。不过仍是这个最易用。相对稳定一些

banner类

  • react-native-swiper
  • react-native-banner （这个是基于react-native-swiper的）

    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也是挺好的，嘿嘿~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程