React Native入门系列：如何搭建RN环境（Windows篇）

一、为什么我们要学习RN开发？

现实来说，如果你会RN，还会原生开发，工作会更加好找，待遇也会更加高。
可参考：关于为什么学习React Native三点原因

二、学习RN，我们需要准备什么？

1.个人技能

如果你要通吃移动端的话：你要必须掌握js脚本语言、java，至少了解OC/Swift，同时也应该会Android或IOS原生开发，用于RN对原生控件的封装。

2.工具与环境（以Android的RN开发为例子）

一、Node.js(自带npm)

Node下载地址：根据自己电脑配置对应下载note版本

• 下载安装完成后，运行cmd，输入 node -v 可以查看当前安装的node.js的版本
  输入 npm -v 可以查看当前npm的版本

• 安装成功后，输入node回车后，便可以输入js语法进行简单的计算了

• node.js安装完成后，已经说明node.exe已经加入到了path环境变量中

• 安装完成后建议设置npm镜像以加速后面的过程（或使用科学上网工具），如下命令：
  npm config set registry https://registry.npm.taobao.org
  npm config set disturl https://npm.taobao.org/dist

• 也可使用nrm切换NPM镜像加速
  

  

  查看node版本.png

二、React Native Command Line Tools

• 进行本操作的前提是node.js安装成功，安装RN命令行工具直接使用node install命令，如下：

  npm install -g react-native-cli

安装RN命令行工具.png

三、Android Studio安装和环境配置

1. 安装AndroidStudio

Android官方下载地址

2. 配置环境变量（JDK）

• 下载和安装JDK：JDK官方下载地址

• 安装完成后配置环境变了，右键偶的电脑——属性——高级系统设置——环境变量

  

  图片.png

• 找到path变量——编辑——变量值：JDK安装目录(默认在C:\Program Files\Java\jdk1.8.0_40\bin)，如果变量值已有其他值，请用";"分隔

  

  图片.png

• 接下来配置CLASSPATH，
  新建变量：CLASSPATH
  变量值：.;C:\Program Files\Java\jdk1.8.0_40\lib\tools.jar;C:\Program Files\Java\jdk1.8.0_40\lib\dt.jar(如果你的jdk不是jdk1.8.0_40版本的，请修改)

  

  图片.png

• 接下来配置JAVA_HOME(缺了这一步Android studio会显示找不到jdk安装目录)
  新建变量：JAVA_HOME
  变量值：JDK安装目录

  

  图片.png

• jdk安装且环境配置完成，可在cmd中检查是否安装成功，命令：java -version

图片.png

三、如何去学习RN开发？

• 1.React Native中文网:http://reactnative.cn/docs/0.45/getting-started.html
• 2.React Native官方文档（英文）：http://facebook.github.io/react-native/docs/getting-started.html
• 3.廖雪峰的官方网站：在这里，你不仅仅会是学到Node
• 4.从RN项目源码中学习：这里有大量RN开源项目，可以随时随地下载学习

如果我的文章有帮助到您，请点个赞，您的鼓励是我写作的最大动力。

下一篇文章：React Native入门系列：创建我的第一个RN Project