ReactNative环境安装与使用

参考官方教程：http://facebook.github.io/react-native/docs/getting-started.html>Building Projects with Native Code>选择操作系统、目标设备

注意以下是windows操作系统，测试Android设备的教程，最好结合官方文档一起看

一、用电脑还是手机

1.  手机上安装运行（不建议使用，很慢，电脑可以）

在cmd命令行，最好以管理员身份运行

npm install –g create-react-native-app

create-react-native-app app (app是文件名)

cd app

npm start

注意：在这一步可能会遇到报错：npm 5还不支持

解决：将npm5转化为npm4:  npm i npm@4 –g 

npm start成功运行之后会在cmd框中会有二维码，用Expo手机应用可扫一扫，Expo在国内的应用市场就可以找到

注意：开发的机子与扫码的手机要在同一个局域网才行

2. 电脑上安装模拟器运行（电脑4G内存以上，否则还是用手机吧）

1.安装node

安装：网上搜索下载安装即可

检测方式：命令行运行node –v，安装成功的结果为node的版本号，否则既不是内部命令也不是外部命令

2.安装Chocolatey

参考官方教程：https://chocolatey.org/install

用cmd.exe的运行以下命令:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

用PowerShell.exe运的行以下命令：

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

检测方法：choco –v，如果不成功，请去官网复制以上链接

3.安装 python2

choco install  python2

检测方法：python -v

注意：如果显示既不是内部命令也不是外部命令，则关了cmd，重新打开再测试一遍

4.安装jdk8

choco install jdk8

检测方法：java -version

注意：如果显示既不是内部命令也不是外部命令，则关了cmd，重新打开再测试一遍

5.下载包react-native-cli

npm install -g react-native-cli

到这里需要的包差不多下好了，接下来是很花时间的安装编译器，在这里Android Studio用的最多的功能是手机模拟器功能，代码可以在自己喜欢的编译器上编辑

二、下载并安装Android Studio编译器

1. 下载Android Studio

外网，下载(600多M)，进不了的去国内市场找破解版

2. 安装

一路next,之后会自动下载组件，时间非常长，要有耐心

注意：记住Android Studio保存目录，第4步配环境变量需要

3.安装安卓sdk

根据网站教程，勾选5个下载项，下载时间也很长，与前一步时间加起来2个小时左右，网较慢的情况

4. 配置环境变量

按照官方文档即可

四、测试

1. 新建项目

react-native init AwesomeProject新建一个项目

用Android Studio打开，点击AVD manager按钮，新建一个虚拟设备运行

注意：AVD manager在屏幕的右上角图标，谈紫色图标，如果是灰色的不可点击，则你的sdk没下完整，还需要下sdk，方法见如下1、2

1.configure:

看底下类似于控制台的地方的提示 2.还有sdk没下，可以新创建一个项目打开，看报错提示，点击下载。

2 新建项目来获取提示需要下哪些包:

左上角file>new...创建一个项目有点慢，等着吧

建好之后界面会有红色的提示，点击安装这些sdk即可

2.新建一个虚拟设备

根据官方教程添加一个虚拟设备一步一步来，如果提示HAXM错误信息，如果显示disableed，可以进入BIOS设置为enabled，方法如下：

第一步：重启电脑，一直按del键进入BIOS（不同电脑进入BIOS方法不一样，问度娘）；

第二步：在BIOS里，选高级设置>configure...>cpu...找到Intel- virtualization Technocology 选项，调整enabled即可

第三步：保存，启动电脑。

以上都做好之后，就可以在Android Studio中，打开你的react native项目，点击AVD manager按钮，选择已经建好的虚拟设备，点击设备右边的绿色的箭头按钮RUN，安卓手机模拟器启动之后

在命令行输入

cd AwesomeProjectreact-native run-android  //运行项目，等待一段时间大概半个小时（好像没那么长时间），虚拟设备就会显示你的react native界面了。

祝贺你，已经安装完成了，如果一切顺利的话，你应该需要花一整天时间，23333……

下一篇文章可以不那么繁琐，而且顺利的话只需要2个小时的时间，而且相比Android Studio运行更快，不那么卡