React Native基础——环境配置、学习资源分享

React Native基础——环境配置、学习资源分享

已经有两个月没有写过博客，和大家分享过技术了，这根本不是我的性格，最近公司项目比较忙，空闲的时间也就不多了，真的是不好意思。我以后会不断的为大家分享技术，谢谢你们对我的支持。

最近刚接触React Native。虽然以前也学过Javascript，但也忘的差不多了，所以我可以说是从0开始学RN吧。我们先来了解一下什么是React Native。

React Native简介

React Native 是一个JavaScript 的框架，用来撰写实时的、可原生呈现iOS 和Android 的应用。 其是基于React的，而React 是Facebook 的用于构建用户界面的JavaScript 库，但是这里不是给浏览器解释的，而是为移动平台。

FaceBook最早发布的关于React Native是针对IOS的，而React Native for Android是在去年也就是2015年9月15日开源发布的。现阶段React Native的体验虽然已经很不错了，只能说很接近原生应用，但是还是不能达到Native App的体验。所以它很火，将来的事，我们将来说，但是目前已经非常火了，多门技术，多条路。我们也应该学学了。

环境搭建

我们不管学习哪一门语言，首先都要对这门语言进行环境搭建，那么我们今天就来对RN的运行环境进行搭建。

我是windows用户，所以搭建环境也是windows的，网上也有关于mac的环境搭建，后面我会给大家分享链接。

如果是Android开发者。这几个步骤你肯定早已经搭建好了，大家根据自己的实际境况按照顺序选择搭建。

安装JDK

这个不多说，相信大家都会，不会的可以看我的Java基础再回首（一）进行下载安装

安装SDK

如果你是AndroidDeveloper的话使用Android Studio安装Android SDK

我们安装玩SDK设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（ANDROID_HOME=> E:\Android\sdk）设置环境变量PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

设置SDK

• 打开Android SDK Manager。

• 选中以下项目：

  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository
  • Local Maven repository for Support Libraries

安装node.js

从官网下载node.js的官方4.1版本或更高版本。

如果你们安装NodeJS成功了，可以通过node -v的命令来测试

安装git

安装React-native需要用到git，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可
下载地址

安装react-native命令行工具

git配置完成后可以clone React-native-cli了，建议大家到将react-native-cli克隆到某个盘，不要在c盘直接clone

在命令行中进入你希望RN安装的目录
输入git clone https://github.com/facebook/react-native.git，等待下载
进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g
安装好之后，可以命令行下就有react-native命令了

创建RN项目

进入你想要创建项目的目录后，输入react-native init MyRNProject，等待一段时间（较慢）

运行package

在命令行中进入项目目录，输入react-native start，等待一段时间：

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒，并且在packager的命令行可以看到形如[====]的进度条。

运行项目

进入项目目录，打开一个命令行窗口,输入react-native run-android
运行完毕后可以在模拟器或真机上看到应用自动启动了。
运行完成后我们看到以下效果：

其实，我写这篇文章的重点不是上面的安装教程。而是下面的这些干货。这些干货里有史上最详细windows/mac版本搭建安装react-native环境配置,话不多说，看我为你们准备了学习React Native的那些新年礼物。

• React Native官网 英文好的朋友可以去学习，当然，看不懂也没关系。
• React Native中文网 这个网站不错
• 江清清RN专栏 前辈级人物，不多解释，多少人都是看着他的RN系列慢慢成长的
• 非著名程序员 他也是在自学RN，讲的很基础，很好的博客。

当然对于有些人来学习一门新的语言，有的人理解能力很强，看博客很快就可以理解了，但是有的人只看博客还不能达到自己理解的程度，习惯了跟着老师的思维走。所以，我们就要去看视频学习React Native .当然视频我也是搞到了，分享给大家学习。

React Native视频（包含ES6语法基础）
链接：http://pan.baidu.com/s/1eREti0M 密码：tp7w
如链接失效，可以加下面的qq群联系我，我会更新链接
希望上面的资料让你学的开心

2016年快要结束了，我们每个人应该对今年做以总结，迎接2017的到来。

祝大家再2017年工作顺利，万事如意。

一路16有你，一起17前行。Keep不止，Android不息。

欢迎有兴趣的同学加我朋友的QQ群：点击直接加群555974449