windows环境下搭建react native环境

这两天学习react native环境，被搞得将近崩溃，作为一个前端小白，小菜鸟，js使用都不太利索，在搭建过程中遇到太多坑，失败过太多次，到最后出现文字的时候，好想抱着张靓颖唱：“终于等到你，还好我没放弃”。再此写下一片安装文档，借此与大家交流，望大家，别遇到我这样的坑，也留下印记，希望下次看到，能不必故地重游。

一：安装node.js

二：安装JAVA JDK

这一步基本都没有什么问题，配置下jdk的环境变量就可以了

三：安装SDK

国内用户推荐从http://androiddevtools.cn/这里下载，下载和安装都很慢，请保持耐心。

如果你已经下载完成了，选择安装

在目录下找到sdk manage,双击打开，选择你想要安装的安卓版本和镜像，下载缓慢可以设置镜像

如果你顺利完成了 ，那么恭喜你，你很幸运，可以直接进行下一步。如果报以下错误

建议两个方法：

第一种：

1, 复制 tools目录 为一个新的目录 tools-copy ,此时在android-sdk-windows 目录下有两个目录 tools 和 tools-copy
2, 在tools-copy目录运行 android.bat ，这样就可以正常 update all 了
3, 之后，关闭 sdk,
4, 在 android-sdk-windows 目录运行 SDK Setup.exe

第二种：
1, 进入sdk的temp文件夹，下载好后会有一个tools_r10-windows.zip(版本号可能会不一样，如r15)
2, 解压此文件，如解压到tools_r10-windows目录
3, 进入tools_r10-windows文件夹，将tools_r1006-windows里的tools文件复制
4, 覆盖掉sdk根目录的tools文件夹中的文件

什么？还不行？没办法了，大牛告诉我，不要一条路走到黑，乱钻牛角尖，我们可以换条路走嘛。

下载android studio，选择合适的目录安装，安装完成后，找到下图的路径。

根据路径的位置，进入相应的文件，现在我们开始配置sdk环境变量了

计算机-右击-属性-高级系统设置

选择环境变量-新建 变量名：Path 变量值：你的sdk tools和platform-tools所在路径（我的是.;D:\android-sdk-windows\platform-tools;D:\android-sdk-windows\tools; ）

测试是否配置成功，打开命令行输入 android 和 adb 分别测试一下

四：安装git,react-native是依赖于git的,如果已经安装，请跳过此步骤

      1，首先，根据你的系统，从git官网，下载对应的git版本

      https://git-scm.com/download/ 下载地址

2. 安装后命令行输入npm测试是否成功

 译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

 npm install -g react-native-cli

安装好之后，可以命令行下就有react-native命令了

五：创建项目，在你想要创建项目的目录下打开命令行（shift+右键）

react-native init MyProject

启动项目
在项目目录下的命令行，输入react-native start，等待一段时间
启动成功后，http://localhost:8081/index.android.bundle?platform=android 在浏览器打开这个地址，如果出现下图，说明成功，服务端已经启动



六：安装和配置模拟器
1.模拟器这里我选择genymotion，因为速度快，界面也很好看呐，姐姐我可是一个看脸的人呢
http://www.genymotion.net/ 进入下载

选择注册，记住用户名和密码奥，因为后面会遇到
安装到你想要安装的目录
2.genymotion 依赖于virtualbox，安装完成后，安装和配置virtualbox


3,安装完成后，打开genymotion，这时候你就需要输入用户名密码了


4,，点击add，新建设备


5，回到主窗口，选择一个我们已经添加的模拟器，点击启动按钮启动模拟器。

启动过程会弹出对话框，询问是否设置ADB连接的对话框，如果需要就点击是，否则就点击否。

点击setting,把sdk路径改为你本地的sdk地址，即是你配置sdk环境变量路径的上一级目录


如果你说，我确实找到了我的路径，路径确实是对的，还是报错，连接不上，那你就要检查你的镜像有没有安装上了

7.开启模拟器的wifi，一定要开启，不然后面会报错


七：运行
react-native run-android
第一次会比较慢，因为要下载安装gradle，耐心等待
1，如果命令行报错，无法连接到服务器环境，并且模拟器界面无变化

可能是你sdk tools不完整，返回检查一下，或者没有连接到模拟器

终于成功了，但是这个红色的界面是什么鬼


不过，模拟器界面终于有了变化，欢欣鼓舞有木有
2.点击菜单，或者摇一摇


选择dev settings



选择最后一个，debug serve，ip地址是你本机的ip,本地链接，ipconfig都可以查看，端口号为：8081



点击ok,回到空白页面，发现是个空白页面，再次点击菜单，选择reload js



终于出来了期待已久的页面，真是费劲