window平台搭建react-native环境

配了两天！真心觉得累，首先是很多文章都是基于mac平台的，window很少，而且这很少的几篇内容也很像，最后是官方文档，前期说了安装react-native-cli，但是，怎么集成到模拟器上面去？代码如何导进ide？用那个ide开发？hello，world应该代码修改后，要怎么刷新？。。。一大堆疑问，真shit！什么叫文档，什么叫资料，什么叫详细，推荐去看看spring的文档。

那么，现在要搭建react-native的开发环境，分为3个步骤

• 需要什么软件

• 安装过程

• 测试

1.需要的软件

• jdk1.8及以上

• nodejs

• python2

• react-native-cli

• Android Studio

• Android SDK 6.0

• Genymotion 模拟器

• vscode

2.安装过程

• jdk

自行百度，一大堆可靠的教程

• nodejs 和 python2 按照官方文档的来，打开cmd，将下面的命令依次粘贴到命令行中

安装命令行工具

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

安装nodejs

choco install nodejs.install

安装python2

choco install python2

设置国内的镜像源

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

• react-native-cli

第一种方法：

执行下面的命令，安装过程可能会久一点

npm install -g yarn react-native-cli

设置国内的镜像源

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

第二种方法：

直接到https://github.com/facebook/react-native.git下载react-native-cli，然后cmd中切到该目录下，执行下面的命令即可

npm install -g 

• Android Studio 和 Android SDK 6.0

到这儿下一个Android Studio：http://www.android-studio.org/

安装Android Studio和Android SDK 6.0，我是让公司做移动端的同事帮我装的，最好让他们帮你装，如果没有，用react-native官网的：http://reactnative.cn/docs/0.50/getting-started.html#content

• Genymotion 模拟器

到Genymotion官网下一个，去注册个号，要个人版的（免费）

官网：http://www.genymotion.net/
下载：https://www.genymotion.com/download/

配置Genymotion 看教程：http://blog.csdn.net/cdnight/article/details/46408677

• vscode

直接到百度下就行了

3.测试

打开cmd，切换到F盘（其它盘也可以，就是不要默认的c盘）

初始化一个react-native项目(10分钟或以上)

react-native init HelloWorldApp

完成后如下

运行项目（安卓环境）

进入刚刚创建的HelloWorldApp目录下

cd HelloWorldApp
react-native run-android

这时，命令执行过程中会顺带的打开一个窗口，然后在浏览器输入：http://localhost:8081/index.bundle?platform=android

这时候，说明react-native的服务端已经跑起来了,完整的目录如下

那么，怎么集成到模拟器上？
先打开Android Studio和Genymotion ，把项目导进Android Studio，导入android文件夹就够了

然后，点击导航栏的绿色三角形图标，选择Genymotion 模拟器

等待一下，模拟器就出现HelloWorldApp的应用。

可是，要怎么编辑HelloWorldApp的首页？
打开vscode，导进整个HelloWorldApp文件，修改App.js的内容

保存后，到模拟器reload下

最终Hello world出来了