React Native在windows上的android开发环境搭建

1.安装nodejs和python2

方式1：官网下载

    nodejs：https://nodejs.org/en/download/current/

    python2：https://www.python.org/downloads/

    nodejs安装可以选择最新版的，python2选择2.X版本

方式2：chocolatey下载

    首先先下载chocolatey，下载方式参照：软件自动化管理工具-Chocolatey

    通过chocolatey下载和安装nodejs，python2，运行cmd

       choco install nodejs.install

       choco install python2

2.安装android sdk和avd

本来安装android sdk时很麻烦的事儿  需要用到 sdk manager来进行插件管理。但是由于android Studio里面提供了  android sdk manager  和avd ，所以React Native 官方推荐使用 安装 android studio。

下载地址：https://developer.android.com/studio/index.html

安装时将组件全部勾选，

等所有组件安装完成会进入欢迎页面，在右下角点击Configure按钮，然后选择SDK Manager，

选择 SDK Platforms,将以下几项勾选

然后切换到SDK Tools

勾选完成后 点击apply，开始安装SDK。

安装完成后，配置环境变量

我的电脑-》右键-》属性

3.配置java sdk

下载安装java sdk8，官方要求sdk版本需要在1.8以上。

下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

然后选择windows版本的下载,例如；

Windows x64195.13 MB  jdk-8u112-windows-x64.exe

直接下载：http://download.oracle.com/otn-pub/java/jdk/8u112-b15/jdk-8u112-windows-x64.exe

下载安装完成后开始配置 JAVA_HOME和PATH 环境变量，

3.1 将JAVA_HOME变量配置到jdk1.8.0_101根目录下

3.2 将Path变量配置到jdk1.8.0_101/bin目录下

配置完成后，环境配置完毕。

4.初始化react-native项目

4.1安装全局react-native-cli

cnpm install react-native-cli -g

安装完成后运行初始化命令，可以直接运行，也可以使用官方提供的yarn工具进行安装。

直接安装:

react-native init AwesomeProject    //AwesomeProject为项目名称，暂时用官网提供的demo名称

yarn工具:

npm install yarn -g   

安装往yarn之后，在运行上面的init命令。

等待项目初始化完成，一般需要几分钟的时间。初始化完成后的项目目录：

其中android和ios文件夹为相应平台的环境编译文件，index.android.js和index.ios.js为相应平台的入口js。

4.2运行react-native项目

在生成的项目中运行命令：

react-native start

会进入打包页面，成功后会出现：

最后会有打包后的页面访问入口：此时访问：http://localhost:8081/index.android.bundle?platform=android

如果可以正常访问，则证明packager服务器正常。该服务器不要关闭！！！，切记！

4.3android模拟机运行项目

由于android studio里面的模拟机用起来比较笨重，所以我这边选择Genymotion来进行模拟。react官方也有相应的说明。

Genymotion的下载地址：https://www.genymotion.com/

1. 该网站需要先注册登录之后，才可以进行免费的下载。
   
2. 下载安装后，开启，并新建一个模拟机。
3. 在命令行里启动React-native的运行命令

react-native run-android

接下来就进入了安装gradle包的页面。

等待下载安装完毕后，如果模拟机出现红色屏幕，则打包app正常。有时候字样可能不一样。

此时打开模拟机，点击 Ctrl+M    选择Dev Settings 》选择host&port 》配置ip和port，ip可以通过ipconfig 或者 http-server（需要npm安装）命令来查询

  

然后点击返回键，点击 Ctrl+M  选择Reload

当出现欢迎界面时，环境就配置正常了。

我的博客网站地址：http://www.moguiweb.com.cn