React Native Android 开发环境搭建（Windows 版）

React Native Android 开发环境搭建（Windows 版）

发表于 2016-10-27    |   分类于 Android学习    |      |   阅读次数 88

原文链接：http://motalks.cn/2016/10/27/React_Native_Development_Environment_Windows/

补上之前说的 Windows 系统的 React Native 开发环境搭建，坑还是比 Mac 环境下的多些。此文的受众还是已经搭建过 Android 开发环境的同学。

需要安装的软件

Chocolatey

Chocolatey 是一个在 Windows 上比较受欢迎的包管理器，安装命令如下：

1	@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

wikipedia : Windows PowerShell是微软公司为Windows环境所开发的壳程序（shell）及脚本语言技术，采用的是命令行界面

若出现 ‘powershell’ 不是内部或外部命令，也不是可运行的程序 的提示，应该是你系统的环境变量配置出了问题，在开始菜单搜索 powershell ，在结果列表中找到 powershell.exe 的路径。添加到环境变量的 PATH 下。再重启命令行窗口即可。安装完成后输入 choco 就可以显示 chocolatey 的版本号来验证是否安装成功。

Node

接着在命令行窗口，使用Chocolatey 来安装 NodeJS .

1	choco install nodejs.install

若网络不畅的话，可以到 NodeJs 官网 下载安装。

安装完成后输入 npm -v 来验证是否安装成功。

Python

现在还没太明白 Python 和 React Native 的关系，网上查了一圈也无果，只有些直言片语说有些项目会用了 python , 所以需要安装。既然官网文档都要求安装，我们就先安装吧。

1	choco install python2

官网文档推荐安装的是 python2，说暂时不支持 python3。大家安装的时候注意下。同样，可以通过 python 官网安装，注意版本。

React Native命令行工具（react-native-cli）

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。没啥好说的，下面命令安装。

1	npm install -g react-native-cli

ANDROID_HOME 环境变量

确保ANDROID_HOME 环境变量正确地指向了你安装的 Android SDK 的路径。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

输入下面命令验证 ANDROID_HOME 环境变量是否设置正确。

1	echo %ANDROID_HOME%

关于“ xxx 不是内部或外部命令，也不是可运行的程序”的问题。

被这个问题坑了好久，虽然一开始就知道是环境变量的问题，输入echo %path% 就可以核对了环境变量 path 了，但是看了很久，路径都是对的。最后一级一级的看文件目录，发现了有一级目录的属性是隐藏的。隐隐约约的感觉问题就出现在这里，对准文件夹，右键，属性，把隐藏的勾勾去掉，应用于当前和子文件夹。等待。。。然后重启命令行窗口，再次运行相关命令，哦了。

测试安装

初始化和运行你的第一个 RN 项目

先初始化一个名为 AwesomeProject (可用任意名称替换 ) 的 RN 项目，后进入该项目的目录，输入运行命令等待部署运行即可。命令如下：

1 2 3

react-native init AwesomeProject cd AwesomeProject react-native run-android

现在你已经成功的运行了第一个 RN 项目，我们可以尝试下修改下。

在 AwesomeProject 文件夹下找到 index.android.js 文件，可以将 Hello, World 字符串改为任意字符，然后摇一摇手机，会出现配置菜单，选择 Reload js，你刚刚的修改就会立马生效。是不是已经体会到了 RN 的神奇了？

关于真机调试

(Android 5.0及以上)使用adb reverse命令

注意，这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。

首先把你的设备通过USB数据线连接到电脑上，并开启USB调试（关于如何开启USB调试，参见上面的章节）。

1. 运行adb reverse tcp:8081 tcp:8081
2. 不需要更多配置，你就可以使用Reload JS和其它的开发选项了。

(Android 5.0以下)通过Wi-Fi连接你的本地开发服务器

1. 首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
2. 在设备上运行你的React Native应用。和打开其它App一样操作。
3. 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
4. 摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
5. 点击进入Dev Settings。
6. 点击Debug server host for device。
7. 输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。
8. 回到开发者菜单然后选择Reload JS。

可能会遇到的问题

问题一

1 2 3 4 5

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 设置菜单

解决办法：在小米和魅族系统中只要在应用管理的权限管理中开启悬浮窗权限即可解决。