搭建React Native Android开发环境

来源:互联网 发布:linux打开绝对路径 编辑:程序博客网 时间:2024/06/13 21:04

刚刚学习完React Natvie的搭建,网上大多数都是很完整,所以现在写一份记录下以及从中遇到的问题
一.安装JDK
注意安装的JDK必须是1.8的版本.安装步骤如下(android开发可跳过)
安装过程中会出现两次 安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。(不能都安装在java文件夹的根目录下,jdk和jre安装在同一文件夹会出错)
安装完JDK后配置环境变量 计算机→属性→高级系统设置→高级→环境变量
系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0)
系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
系统变量→新建 CLASSPATH 变量 变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
配置完毕后, 运行cmd 输入 java -version,若显示版本,则表示配置成功.
二.安装Android SDK
通过下载Eclipse ADT或者Android Studio,即带有SDK,为了加速下载,推荐从AndroidDevTools下载。
然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager或者SDK文件夹下的SDK Manager.exe查看),确保以下项目已经安装并更新到最新(以下有些下载不了):

Tools/Android SDK Tools (24.3.3)Tools/Android SDK Platform-tools (22)Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1)Android 6.0 (API 23)/SDK Platform (1)Extras/Android Support Library(23.0.1)Extras/Android Support Repository

三.安装node.js
从官网下载node.js的官方4.1版本或更高版本。
建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global
四.安装react-native命令行工具 在cmd运行
npm install -g react-native-cli
五.进入你的工作目录,运行
react-native init MyProject
六.运行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改为更大的值(单位是毫秒)
七.安卓运行
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
react-native run-android
运行完毕后可以在模拟器或真机上看到应用自动启动了。
运行出现报错,查看cmd报的错误,一般都是SDK JDK不符合环境.如果运行成功,但出现红屏显示连接错误
先运行adb devices能否看到设备,如果有摇晃设备或按Menu键,可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
流程就这样,有什么问题可以留言.

原创粉丝点击