win10、win7react-native 环境配置

前些天闲来没事做，用公司的WIN7旗舰版64位系统，配置了‘react  native’的环境，刚开始配置觉的好恶心，报了很多的错，最后一个一个的解决，终于看到了“welcome to react  native'！周末在家用自己的win10教育版64位系统配置了下，也配置成功。在此记录下。

 

一，首先安装node8.3.x以上版本，我用的NVM来管理node版本，地址节点下载https://nodejs.org/zh-cn/

安装完成后在命令行中输入，'node -v，npm -v'查看下版本，或者是否安装成功

下载完成后，选择目录安装完毕就行。

命令行的打开，'window + R'

输入CMD回车即可，

注意所有在命令行中输入命令后要回车下哈

二，我配置了的Java的的的环境，JAVA的JDK下载地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

JDK下载操作

  

先点击接受许可，在按照自己的系统版本下载。我的是window64位系统

安装JDK安装过程中，总共二次选择安装目录

第一次我选择的安装目录是

第二次我首先在上图的目录中建立了一个jre1.8.0_181的文件夹，然后选中，安装到这里面了，

JDK环境配置

首先选中我的电脑，然后右击=>“属性=>”左边的高级系统设置=>“选择上面的高级选项=>”点击底部的环境变量（N）... =>“到达下图

在下面的系统变量中新建，如下图

然后在新建CLASSPATH，变量值是：'.;％JAVA_HOME％\ lib \ dt.jar;％JAVA_HOME％\ lib \ tools.jar'注意变量值前面有个'.;'

最后配置path路径  

点击'path'路径，win10进入下图，（win7的就是和上面一样的弹出窗，选中变量值，按键盘上的结束键到最后）配置完成后，在命令行中分别输入，java javac看看有没有报错

三，官网上说还要装python环境（好像不用装也行），并且只是python2的环境，所以我装了个python2，地址下载https://www.python.org/

下载操作

下载完成后安装一路下一步下一步，当然你可以改变安装路径

最后配置下环境，这又回到配置的Java的的的的步骤了，

在 'path' 路径中加上 python2 安装的目录路径即可，如图（配置完成后，在命令行中输入 'python'，看看有没有报错）

四，配置的的Android的环境，这个最不好玩了，中间出了很多错，

先下载和安装Android Studio

下载地址https://pan.baidu.com/s/1t8jHTcKZ7WnwcQUkpxYv1Q

安装好之后打开，界面如下

然后进行下面图示的操作（下载SDK，如果老是下载失败，请自备梯子，用lander还行）

 

 

进入下载界面

等待下载完成，最后点击完成

然后进入配置环境环节，操作步骤和配置的java一样，

配置细节如下图

然后配置路径，如下图

配置完后，在命令行中输入adb shell没有报错说明andriod环境配置成功

如果没有成功，在配置一遍，记得，再次配置完成后，请不要再以前的命令行中输入adb shell请重新打开一个命令行，

否则，你的得到的结果是一样的，告诉你ADB不是可执行函数

OK啦，环境配置完毕。

 

然后下载一个夜神安卓模拟器，（不限制使用夜神，可以用其他的模拟器）神夜模拟器下载地址https://www.yeshen.com/

这个就不说下载操作了

安装好之后，打开夜神模拟器

打开一个命令行，输入adb connect 127.0.0.1:62001

出现下图，说明连接夜神模拟器成功，请不要关闭此命令行窗口（猜测不能关，我关了再次输入上面的连接命令，提示我已经连接了），也请不要关闭夜神模拟器

-------------------------------------------------- ---------欢迎来到React Native ------------------------------------ - --------------------

先安装yarn,,,,,,,,,,,,,,其实用npm也行，但是一般要网络好，并且不要被墙，我用yarn在这里没出过问题，可以试试cnpm

CNPM的安装，

打开一个命令行，在命令行中输入npm install -g cnpm --registry = https://registry.npm.taobao.org

'yarn'的安装

打开命令行输入npm install -g yarn react-native-cli

然后配置镜像在命令行中输入下面2个命令

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

react-native init AwesomeProject然后选择一个文件夹用来放置项目，在这个文件中打开一个命令行输入（怎么在文件夹中打开命令行，请看下面的第二个图）

AwesomeProject是你项目的名字，你可以任意起（限中文）

然后等待下载完毕（下载失败，请自备梯子）

打开AwesomeProject文件夹

项目结构如下图

然后，在项目根目录下（上图所示的文件夹）打开命令行，【可以在此文件夹下按住移键，然后在点击鼠标右键，操作如下图】

然后在这个命令行中输入yarn回车，如下图，就会下载上面没有的那个node_modeules文件夹（下载失败，请自备梯子）

等待下载完成后

然后就在这个打开的命令行窗口中输入 react-native run-android

第一次运行会下载很多东西，是gradle这个之类的东西，下载错误，请自备梯子

下载界面如下

然后它还会自动打开一个窗口，如下图

一条绿色杠代表重载几次（reload），第一次运行成功是一条绿色杠，请不要关闭这个窗口，这是开启了服务

别急,,,,,应该会报错的，（上图我是拿我运行成功的图，只是说会打开一个窗口，失败的图不是这样的，是没有绿色杠的哦）（此时请去看夜神模拟器）

一般情况下先是下图这个错误，这是要设置代理

编译窗口报的错

夜神模拟器中的错误

解决方案

然后出现如下图

点击开‘dev Setting’弹出下图

这个输入框是输入你的电脑的IP加上8081端口号，如下图

这IP不是我电脑的，我随意改的，

然后点击夜神模拟器那个房子图标，先回到主页面吧，如下图

之后再执行下react-native run-andriod

可能又会报一个错，这是不兼容问题，如下图（我把我的IP干掉了，莫怪）

解决方案，

一，先删除下载的那个node_module文件夹，

用编辑器打开项目根目录下的的的的package.json文件

如下图，

应该是这2个版本，然后把这2个版本改掉，react native改成0.54.0，babel-preset-react-native改成2.1.0

如下图

之后再次在这个根目录下打开的命令行窗口中输入'yarn'回车，下载node_module文件夹

下载完成后再次输入react-native run-android，然后等待等待，

然后就看见期待已久的界面（请看夜神模拟器）

二，按照方法一，把版本改下，

然后在打开项目的命令行窗口中输入npm update

执行完成后，在执行下react-native run-android，然后等待等待，

就会出现你期待已久的界面

-----------------------------------------开始修改代码---------------------------------------------------------

用编辑器打开代码后，随便改改，然后同处理代理错误一样，点击夜神模拟器上的三横杠，弹出一个层，点击第一个reload即可，看到修改后的效果