在Windows下搭建React Native Android开发环境
操作系统
Windows 7 X86
Windows 7 X64 (推荐)
硬件要求:
建议的最低要求:Core i3 2 GHz 或更快,8 GB RAM 或更大。
磁盘空间:C盘分配 100 GB 空间
按操作系统版本,选择X86或X64版本进行安装。
安装完毕后,将jdk的bin目录追加至【环境变量-系统变量-Path】。
C:\Program Files\Java\jdk1.8.0_91\bin
按此文章说明,安装Android Studio所需组件。(安装所需时间较长,可能需要2至3小时)
安装完毕后,配置【环境变量-系统变量】。
新建ANDROID_HOME,指向所安装的Android SDK的路径。
ANDROID_HOMEC:\Users\Administrator\AppData\Local\Android\sdk
将Android SDK tools目录、和platform-tools目录追加至【环境变量-系统变量-Path】。
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
之所以安装此项,是因为编译node.js的C++模块时需要用到该环境。
先查看【控制面板-程序和功能】是否已经安装有Microsoft Visual C++ xxx Redistributable运行库,xxx为2013或2015版本。如已安装可跳过。
安装方式有两种,以下可任选其一:
1、安装Visual Studio 2013或2015。(2015安装所需时间较长,可能需要2至3小时)
2、安装如下独立包
(必装)Visual C++ Redistributable for Visual Studio 2015
(非必装)Visual C++ 2015 Build Tools
(非必装)Microsoft .NET Framework 4(独立安装程序):
(非必装)Microsoft .NET Framework 4.5(针对 .NET Framework 4 的高度兼容的就地更新)
(非必装)Microsoft .NET Framework 4.5.1(针对 .NET Framework 4.5 的高度兼容的就地更新)
如果安装的是2015,需在命令行中运行:npm config setmsvs_version 2015 --global
下载,安装python 2.7.x。(3.x 以上版本React Native不支持)
安装完毕后,配置【环境变量-系统变量】。
新建PYTHON_HOME,指向所安装的路径。
PYTHON_HOMEC:\Python27
将以下路径追加至【环境变量-系统变量-Path】。
%PYTHON_HOME%;%PYTHON_HOME%\Scripts
查看版本,在命令行运行:python--version
下载,安装6.10版本或更高版本。
安装完毕后,配置npm为国内淘宝镜像,加快包的下载。
npmconfig set registry https://registry.npm.taobao.org --globalnpmconfig set disturl https://npm.taobao.org/dist --global
查看版本,在命令行运行:node-v
下载,安装过程中注意选择:
1、Run GitfromtheWindows Command Prompt2、Checkoutas-is, commitas-is
安装方式有两种,以下可任选其一:
1、在命令行运行:npm install -g react-native-cli
2、下载react-native后解压,在命令行窗口进入react-native/react-native-cli目录,运行
npminstall -g react-native-cli
验证安装是否成功,在命令行运行:react-native-v
BlueStacks模拟器,选择下载离线安装包并安装
插件:ReactNativeTools ESLint vscode-icons DocumentThis
创建项目的工作目录,shift+右键选择【打开命令窗口】,命令行输入:
react-nativeinit XXX
工作目录路径不允许有中文字符;如有中文字符,会导致后续步骤编译失败。
XXX为工程名称,可自行命名。
运行命令后,需要等待数十分钟的下载。
在工程目录下,命令行输入:
react-nativestart
Packager Server窗口需要一直处于开启状态
运行BlueStacks模拟器,在命令行输入:
adb devices
可以查看到所连接的设备。(必须要有设备列表才能在第四步骤安装APP)
adb,即Android Debug Bridge,Android调试桥帮助: dbo -help启动:adbstart-server停止:adbkill-server
如果模拟器运行正常,但是使用adb devices命令查无设备,可以使用start和kill命令进行重启。
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
react-nativerun-android
运行完毕后,在模拟器或真机上看到APP应用自动启动。
首次运行会自动下载gradle依赖。(该依赖包约六七十兆。下载过程较耗时,取决于网络状况和墙的不特定阻断)
APP应用自动启动后,能看到APP红屏报错,需要通过配置,让app能够正确访问pc端的packager服务。
1、摇一摇,自动弹出调试菜单,【Dev Settings - Debug server host for device】,输入正在运行packager服务的计算机IP加:8081
2、Back返回,摇一摇,在调试菜单中选择Reload JS。即可看到APP界面!
打开Chrome,访问 http://localhost:8081/debugger-ui
按F12, 可打开开发者工具。
在模拟器或真机,摇一摇,选择Debug JS Remotely。即可开始调试!
如果有引入第三方组件,需在工程目录重新执行命令
npminstall
新增项目文件、或者修改Android、IOS原生态代码时,,需在工程目录重新执行命令
react-nativerun-android
cdandroid gradlew.bat assembleRelease--consoleplain
cd android表示进入android目录
生成的APK文件位于app/build/outputs/apk/app-release.apk
cdapp/build/outputs/apk adb installapp-release.apk
进入apk所在目录,运行命令安装app至手机