H5前端如何搭建自己的Hybrid环境

Hybrid App是目前移动开发人员的首选平台，在前端开发过程中，能够同时采用网页语言和程序语言两种进行开发，兼具Native App和Web App的诸多优点，大大降低了开发成本和难度，目前很多大型互联网公司都在采用Hybrid App开发模式，例如：百度、网易等。

下面爱创课堂马老师为大家介绍一下如何搭建自己的Hybrid环境，今天内容面向大多非Mac平台，所以把android作为‘Hybrid App’基础。

准备window系统

1.安装JDK 1.8+，并配置环境变量：

1） JAVA_HOME=你的java安装目录。

2） path += ‘%JAVA_HOME%\\bin’（追加bin目录作到PATH环境变量）。

2.安装Android Studio2.0+, 安装Android SKD，配置环境变量：

1） ANDROID_HOME=你sdk所在目录。

2） path += ‘%JAVA_HOME%\\platform-tools ’（追加platform-tools 目录作到PATH环境变量）。

3、安装Python

从官网下载并安装python 2.7.x（3.x版本不行）

4、安装node.js

从官网下载node.js的官方6.2版本或更高版本。

设置淘宝镜像（或购买代理）

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

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

5、安装react-native命令行工具

npm install -g react-native-cli

6、创建项目

进入你的工作目录，运行

react-native init RN

7、在RN目录下，确保有按照package.json安装依赖

8、在Android Studio中导入项目的android文件夹

9、安装Genymotion android模拟器

1） 打开官网

2） 注册个人账号

3） 安装模拟器和虚拟机打包版

4） 安装Android虚拟机镜像（≥API23）

5）配置adb环境

10、在Android Studio的设置下，安装genymotion插件

并配置genymotion插件指向模拟器安装目录

11、 运行react-native项目

CMD： react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况。所以要下载成功，请确保网络通畅（必要时也可以FQ）【这里也可以直接手动把下载好的依赖包，拷贝到gradle的环境目录

C:\\Users\\Sirius\\.gradle\\wrapper\\dists\\gradle-2.14.1-all\\8bnwg5hd3w55iofp58khbp6yv目录下，但不要解压！！（等待运行自动解压,大概要10分钟）】

如果出现找不到tool.jar相关错误

org.gradle.java.home=C:\\\\Sirius\\\\devSoft\\\\Java\\\\jdk1.8.0_31

12、运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问大概需要十几秒，并且在packager的命令行可以看到类似[====]的进度条。

如果你遇到了ERROR Watcher took too long to load的报错，请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，将其中的MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）

如果启动后报地址不对，那么可能是node_modules安装问题，把之前的cnmp修改为npm来安装

Android模拟器运行

1、在Android Studio中，启动虚拟机

2、运行到服务器