如何搭建自己的Hybrid环境.docxVIP

如何搭建自己的Hybrid环境Hybrid App是目前移动开发人员的首选平台，在前端开发过程中，能够同时采用网页语言和程序语言两种进行开发，兼具Native App和Web App的诸多优点，大大降低了开发成本和难度，目前很多大型互联网公司都在采用Hybrid App开发模式，例如：百度、网易等。下面为大家介绍一下如何搭建自己的Hybrid环境，今天内容面向大多非Mac平台，所以把android作为‘hybird 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 --globalnpm config set disturl /dist --global5、安装react-native命令行工具?????npm install -g react-native-cli6、创建项目进入你的工作目录，运行react-native init RN7、在RN目录下，确保有按照package.json安装依赖8、在Android Studio中导入项目的android文件夹导入Android项目后，会有两个提示（需要23.0.1和索引相关文件）/android/repository/build-tools_r23.0.1-windows.zip9、安装Genymotion android模拟器? ? ?1） 打开官网? ? ?2） 注册个人账号? ? ?3） 安装模拟器和虚拟机打包版? ? ?4） 安装Android虚拟机镜像（≥API23）? ? ?5）配置adb环境? ? ? ? ?? ??10、在Android Studio的设置下，安装genymotion插件并配置genymotion插件指向模拟器安装目录11、 运行react-native项目CMD： react-native run-android ?首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况。所以要下载成功，请确保网络通畅（必要时也可以翻墙）【这里也可以直接手动把下载好的依赖包，拷贝到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_3112、运行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、运行到服务器