Windows版本搭建安装React Native环境配置及相关问题

liwya

　　此文档整理参考地址：
　　http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/
　　http://android-mirror.bugly.qq.com:8080/include/usage.html

1、安装Java
这里需要注意对环境变量的设置，可以根据java -version来检测一下。
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。如已装jdk且小于1.8的，先卸载再重新装jdk1.8：控制面板->卸载程序->将Java开头的两个文件卸载就可以重新安装了。参考文档：http://jingyan.baidu.com/article/d169e186afd233436611d828.html


2、设置SDK

到AndroidDevTools下载SDK tools，红框内任意一个，一般是选择第一个
下载地址：http://www.androiddevtools.cn/

　　C、检查代理是否正常工作
　　点击菜单Package>Reload，如果能获取新版本，表明可以正常访问镜像

　　D、选择包进行安装

选择Install packages，弹出以下窗口，选中Accept License-->Install

　　正在安装。。。


安装后的目录：

点击SDK Manager.exe运行，会报如下错误：
Failed to execute tools\android.bat;
解决方法：
进入sdk manager.exe文件所在的位置，该目录下的temp文件夹下有个tools_rXX.X.X-windows.zip文件(XX.X.X代表版本号)。解压zip文件到android-sdk\tools文件夹下。
重新打开sdk manager.exe，显示如下：




3、配置SDK环境变量
安装会产生sdk安装路径，如：C:\Users\admin\AppData\Local\Android\android-sdk
这里需要注意设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（ANDROID_HOME=> E:\Android\sdk）设置环境变量PATH：例如：（PATH=> C:\Users\admin\AppData\Local\Android\android-sdk\tools;C:\Users\admin\AppData\Local\Android\android-sdk\platform-tools）


4、安装node.js
这货是基于js的，node.js轻量级的Web服务器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本
下载地址：https://nodejs.org/en/
下载node.js，找好对应的版本，然后去安装就可以了。
大家可以通过node -v的命令来测试NodeJS是否安装成功




5、安装git
安装React-native需要用到git，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可
下载地址：https://git-for-windows.github.io/

安装后将git添加到环境变量：
git 目录下的 bin（如 C:\Program Files (x86)\Git\bin ）添加到 PATH 环境变量。
选择 PATH——编辑，将 bin 的路径（ C:\Program Files (x86)\Git\bin ）添加到变量值后面


6、安装react-native命令行工具react-native-cli
git配置完成后可以clone React-native-cli了，建议大家到将react-native-cli克隆到某个盘，不要在c盘直接clone
1) 在D盘中创建react_native_workspace目录：md react_native_workspace

2) 在命令行中进入你希望RN安装的目录：cd react_native_workspace

3) 输入git clone https://github.com/facebook/react-native.git，等待下载
　　clone成功后：

　　3)   进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g

　　安装好之后，可以命令行下就有react-native命令了
　　7、创建RN项目
　　进入你希望创建项目的目录后，输入react-native init AwesomeProject，等待一段时间（较慢）

　　成功后：

　　目录结构：



8、运行Package
在命令行中进入项目目录，输入react-native start，等待一段时间：
　　这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。

　　9、运行项目
　　刚刚运行package的命令行不要关闭，重新启动一个新的命令行，进入项目目录，输入react-native run-android
　　注：此处下载需要科学上网

　　等待运行(如果是第一次运行，首先会下载gradle，时间较长)，运行成功后出现下图

　　第一次手机肯定报错

　　这时候我们摇一摇手机，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口
　　摇一摇”这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单。

　　这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081

　　置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！

相关问题：
1、执行react-native run-android报错：No connected devices！

打开安装好的模拟器，并启动设备


2、安装模拟器：Genymotion，点击add没有设备的问题：

一般登录之后就会有device显示，如果登录不进去，从以下三个地方检查
1、使用Oracle VM VirtualBox管理器创建一个虚拟电脑(不用再里面装系统，相关信息配置好就行)，并打开启动，参考：
http://jingyan.baidu.com/article/8ebacdf02a5c3649f65cd5f0.html
2、中文路径问题，参考：http://blog.csdn.net/zxd0328/article/details/43601301
3、打开Settings-->Network-->选择Use HTTP Proxy，填写代理服务网络（先打开科学上网）
4、更新电脑显卡
主要从上面四个方面检查，以上都做了，如果还是不行，检查在Genymotion中注册的账户是否已激活，另外多登陆几次，看到下面的黑色一直再滚动，说明就可以了
　　3、Genymotion启动device后显示白屏：


很可能是显卡驱动有问题，用驱动人生或者驱动精灵更新显卡驱动就可以了：

4、执行react-native run-android报错：Timeout getting device list
解决方法：将安装好的sdk路径添加到这

　　

校长ling

学习一下