React Native入门笔记(基础环境的搭建)

React-Native的中文官网:https://reactnative.cn

一、准备工作

React-Native必须安装的依赖有:Node、Npm、React Native 命令行工具、Python2 以及 JDK 和 Andriod Studio。

(注意:Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)

1.安装Node.js。

(1)第一步,到node.js的官网下载node.js到自己的电脑上。

(注意:根据自己的操作系统和位数选择下载。)

(2)第二步,下载完成后双击.msi文件进行,安装过程比较简单,一直next就可以,这里就不再骜述。

(3)第三步,安装成功后,windows+R在弹窗中输入cmd,输入命令行:node -v。如果出现node.js的版本号,如图就证明成功了。


2.由于新版本的node.js已经集成了npm,所以这里就不再骜述整个过程了。可以直接输入npm -v测试是否成功,如图:


3.安装Python2.x。

由于React-Native官方对Python版本安装有要求,所以安装之前要去React-Native官网看看具体的版本要求,我这里就讲讲Python2.7.13的安装方法,其他版本也都差不多。

(1)第一步,到Python官网下载合适的版本,注意选择操作系统和位数,我这里是window7  64bit,安装的是Python2.7.13版本的。

点击Python2.7.13,出现如下的页面,选择画红线的下载到自己的电脑。


(2)第二步,找到下载好的msi文件,如图,双击安装即可,这个步骤比较简单,这里不再骜述,安装完点击finish就行了。

(注意:把Python的安装路径记下来,后面要用到)


(3)第三步,环境变量的设置。

首先点击计算机右键属性-----高级系统设置----环境变量,如图画红线的部分:

点击环境变量----找到path,点击编辑,如图红色部分:


修改Path的变量值,找到刚才安装Python的文件夹(上面有让记下来的),把路径复制下来,我这里是C:\Python27,把C:\Python27添加到变量值里面,需要注意的是,如果变量值里面原来有值的,需要先添加一个英文的分号;,再把路径复制进去,即 ;C:\Python27。如图:


(4)第四步,运行Python。

windows+R弹出窗口输入cmd进去windows命令行,输入python,出现如下的版本号,证明安装成功。

(注意:如果你之前就打开了命令的话,需要关闭再输入python,不然会出错)。


4.安装JDK。

(1)第一步,到jdk的官网下载jdk对应的版本到自己的电脑。

(注意:React-Native对jdk的版本有要求,下载之前最好到官网上看看,我这里要求的是jdk1.8,所以就以jdk1.8为例。还要选择好自己的操作系统和位数。)

(2)第二步,安装jdk。

选择安装目录,安装过程中会出现两次安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。如图:

(安装的过程中注意选择好目录)


(3)第三步,配置环境。

计算机右键----属性---高级系统配置----环境变量,如图:


打开环境变量,新建 JAVA_HOME 变量 ,变量值为jdk安装的地址,本人是默认的安装地址:C:\Program Files\Java\jdk1.8.0_181,新建完点击“确定”即可,如图:


找到环境变量path,点击“编辑”,在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码),如图:


新建 CLASSPATH 变量,变量值为: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点),如图:


检验jdk安装是否成功的方法:windows+R打开输入cmd,输入命令行:java -version (java 和 -version 之间有空格),如图出现版本号证明安装成功:


5.安装React-Native命令行工具。

windows+R打开输入cmd,输入命令行: npm install  react-native-cli  -g

6.安卓环境和andriod studio的安装,我就不多说了,React-Native官方有详细的教程说明,按照里面搭建基本就可以了,比较麻烦的就是安卓的下载都是国外的,网速是个问题,大家都懂的,翻墙吧!


以上就是React  Native入门安装教程,希望可以帮助到刚入坑React Native的小伙伴,有问题可以留下来,我们一起填坑[奸笑][奸笑][奸笑]

你可能感兴趣的:(React Native入门笔记(基础环境的搭建))