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的小伙伴,有问题可以留下来,我们一起填坑[奸笑][奸笑][奸笑]