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