• 1.内容简介

• 2.环境搭建（预计用时：1~2天）

• 3.Hello World（预计用时：0.5天）

• 4.了解 index.android/ios.js

• 5.Flex布局（预计用时：2~3天）

• 6.网络请求（fetch）（预计用时：2~3天）

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

• 8.滚动视图（2~3天）

• 9.总结

前言

–

---

从最开始开始接触 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

3.Hello World（预计用时：0.5天）

---

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

import React, { Component } from ‘react’;

import { AppRegistry, Text } from ‘react-native’;

class HelloWorldApp extends Component {

render() {

return (

Hello World!

);

}

}

// 注意，这里用引号括起来的 ‘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天）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

基础面试题

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

.(img-Y1CocSpq-1712790732450)]

基础面试题

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

[外链图片转存中…(img-poVBQgc0-1712790732450)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-Qc2uMtiy-1712790732451)]