Android Studio环境下搭建ReactNative
1.安装Android Studio 首先肯定是 安装Android Studio(包含SDK)(国内推荐) ps:这里有一点要注意,需要为SDK配置环境变量,名称必须为ANDROID_HOME
2.安装Nodo.js(自带npm) 从官网下载node.js的官方4.1版本或更高版本。 安装完成后建议设置npm镜像以加速后面的过程(或使用访问外国网站工具),也可使用nrm具体参考链接。
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
3.下载并安装Git for Windows。 在安装过程中,请务必记得勾选Run Git from Windows Command Prompt,这样会把Git的可执行程序加入到PATH环境变量中,这样其他程序才能在命令行中正确调用Git
4.安装genymotion(使用Android实体机调试的可以跳过此步骤) Android Studio自带的AVD速度实在不敢恭维,为了速度,安装genymotion 这个Android虚拟机,需注册,安装完成后,进入 genymotion 新建虚拟机即可。
下载genymotion
5.安装C++环境 推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。
6.安装Python 从官网下载并安装python 2.7.x
7.安装react-native命令行工具
npm install -g react-native-cli
8.创建react-native项目
react-native init RNTest
9.运行packager(服务端) 进入项目根目录运行
react-native start
或
npm start
10.安卓运行(参考ReactNative中文社区) 保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
react-native run-android
首次运行需要等待数分钟并从网上下载gradle依赖。 运行完毕后可以在模拟器或真机上看到应用自动启动了。 如果gradle依赖下载出现报错,请多试几次,或者设置V**加速。 如果apk安装运 行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。 至此,应该能看到APP运行,并报错 Unable to download JS bundle
摇晃设备或按Menu键可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
配置服务器
如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
11.遇到的坑(耽搁我一个通宵!!!) 在第9步中我们发现命令行窗口可以发现为该服务分配了8081端口,我们可以通过浏览器访问http://localhost:8081/index.android.bundle?platform=android查看返回JS是否正确。 不过一直.babelrc.stage 报错
解决方案就是去
RNTestnode_modulesreact-deep-force-update
删掉.babelrc
12.日常环境开发配置(Android Studio + WebStorm) 走到这一步,可以关闭所有的窗口了
WebStorm配置
WebStorm配置
咱们用的是npm
照着配置一下,其实和第9步的一样
完成,运行
Android Studio
ps:Android Studio无需配置,只需import,不过import时候注意目录,是在ReactNative项目根目录的android目录下,否则Android Studio无法编译调试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 视频配音篇,如何使用百度翻译将文本转换为mp3语音?
- Objective-C的hook方案/ Method Swizzling
- Python爬虫:无账号无限制获取企查查信息
- Spark Streaming——Spark第一代实时计算引擎
- bamtools分割bam文件
- 在genome browser中添加自己的注释文件
- 原理+代码|Python基于主成分分析的客户信贷评级实战
- Python办公自动化 | 从PPT到Word
- linux命令行参数getopts参数二选一
- 黎巴嫩首都爆炸能量有多大?物理学家看视频计算:300吨TNT!
- OracleDG 环境主备业务数据不同步备库报ORA-600错误的处理过程
- Xcode清理模拟器文件
- 【Android 音视频开发打怪升级:FFmpeg音视频编解码篇】六、FFmpeg简单合成MP4:视屏解封与重新封装
- 32.opengl高级光照-延迟着色法
- Tsunami:一款功能强大的通用网络安全扫描工具