原文连接:
motalks.cn/2016/10/23/…javascript
转载请注明来源。html
本身在搭建 React Native Android 版开发环境的时候,参考了不少文章,发现多数文章提供的资料过于繁杂,对于一个常年用真机调试的 Android 开发者来讲,React Native 开发环境的搭建是能够更简单的。此文受用的对象是使用 Mac 以及真机调试的 Android 开发人员。最好确保你有个健全的网络(你懂的)。java
在 Mac 的环境下,搭建 React Native Android 开发环境搭建只须要下面4步。node
号称是 MacOS 不可或缺的套件管理器,反正就是你能够用它来下载安装 Node.js , React Native 命令行工具的工具。Homebrew 的中文介绍点这里。打开 Mac 终端,输入以下命令安装:react
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"复制代码
安装完成后输入:android
brew -v复制代码
若显示出了 Homebrew x.x.x 则标识安装成功。 若是你不确认以前是否已经安装了 Homebrew 也可使用该命令来检测。git
注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到
/usr/local
目录不可写的权限问题:"EACCES: permission denied" 。可使用下面的命令修复:githubsudo chown -R `whoami` /usr/local复制代码
这玩意官网的介绍是:一个基于 Chrome V8 引擎的 JavaScript 运行环境。从概念上讲就相似 Java 的 JRE 了。shell
接下来就可使用 Homebrew 来安装 Node.js 了,命令以下:npm
brew install node复制代码
React Native 中文网教程写到 “React Native须要NodeJS 4.0或更高版本,本文发布时Homebrew默认安装的是6.x版本,彻底知足要求。”
咱使用下面这个检查 Node.js 版本号的命令来验证下。
node -v复制代码
个人结果的是 v4.1.2 ,不知道是教程的问题仍是我安装时选择的不一样选项的问题。注:Node.js 官网也提供两个版本,一个是 LTS 长期提供支持的稳定版本,目前为 v4.6.0。另外一个是当前最新版本,目前为 v6.8.1。v4.1.2 好歹还能用,先不纠结这个,继续下一步。
没什么好说的,React Native 的命令行工具用于执行建立、初始化、更新项目、运行打包服务(packager)等任务。安装命令以下:
npm install -g react-native-cli复制代码
英文官网对 Android Studio 和 JDK 并无提出具体的版本要求,你们能够用本身现有的开发环境试试。
ANDROID_HOME 环境变量 :确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。具体的作法是把下面的命令加入到~/.bash_profile
文件中。而小数点开头的文件在Finder中是隐藏的,而且这个文件有可能并不存在。请在终端下使用sudo vi ~/.bash_profile
命令建立或编辑。
关于 vi 操做,本身是真的不熟悉,如今摘录一段基本操做。以免你们在这浪费太多时间。进入 vi 编辑页面后,此时是出于命令行模式,是没法输入文字的。这时候按下 i 键,切换到—INSERT—模式,进行编辑操做。编辑完后,按 esc 键退出到命令行模式。按下 :冒号键进入 Last line mode。输入 wq 进行存盘退出。
熟悉操做后,在 .bash_profile 文件中加入下面两行代码 ( 注:~表示用户目录,即/Users/你的用户名/
) ,可使用echo $ANDROID_HOME
检查此变量是否已正确设置。
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools复制代码
简单来讲,使用真机调试的同窗,React Native 开发环境就已经搭建完毕了。下面就能够进行 React Native 项目测试了。
先初始化一个名为 AwesomeProject (可用任意名称替换 ) 的 RN 项目,后进入该项目的目录,输入运行命令等待部署运行便可。命令以下:
react-native init AwesomeProject
cd AwesomeProject
react-native run-android复制代码
如今你已经成功的运行了第一个 RN 项目,咱们能够尝试下修改下。
在 AwesomeProject 文件夹下找到 index.android.js
文件,能够将 Hello, World 字符串改成任意字符,而后摇一摇手机,会出现配置菜单,选择 Reload js,你刚刚的修改就会立马生效。是否是已经体会到了 RN 的神奇了?
注意,这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。
首先把你的设备经过USB数据线链接到电脑上,并开启USB调试(关于如何开启USB调试,参见上面的章节)。
adb reverse tcp:8081 tcp:8081
Reload JS
和其它的开发选项了。adb shell input keyevent 82
,能够打开开发者菜单。Dev Settings
。Debug server host for device
。Reload JS
。问题一
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs复制代码
解决办法:把项目中的~/android/app/build.gradle中的gradle版本改成1.2.3
问题二
摇一摇手机没办法出现 Reload Js 设置菜单
解决办法:在小米和魅族系统中只要在应用管理的权限管理中开启悬浮窗权限便可解决。
React Native 集成到现有的 Android 项目
React Native 项目热更新
React Native 优化(包大小优化,预加载解决首次加载白屏等)