在Windows平台搭建ReactNative全套开发环境
2018-03-13 16:20
856 查看
前言
本文将基于以下应用,搭建ReactNative在Windows平台下的开发环境,截止至发稿日期,全部采用2018年最新的应用环境,并调整了搭建顺序,加快搭建速度,优化国外网络下载速度。本环境在Windows7 和Windows 10系统平台上均已测试成功,分享给大家。1.所需开发环境
Git(用于下载React Native)Android Studio(开发安卓代码)
Genymotion(安装程序运行模拟器,非必须安装)
Node.js(v8.9.3)
React Native Command Line Tools(v2.01)
WebStorm (最好用的JS编辑器)
2.安装Git
GIt用于下载安装 React Native,在安装过程中注意勾选”Run Git from Windows Command Prompt”,这样才会把git命令添加到PATH环境变量中。下载安装:https://gitforwindows.org/
3.安装Android Studio
①下载AndroidStudio
谷歌中国下载地址已恢复正常使用,下载安装即可:https://developer.android.google.cn/studio/index.html
②修改Android Studio中SDK默认路径
系统盘有剩余几十G空间的直接跳过此步骤亦可。SDK默认在系统盘(可能需要10~20G),如果系统盘空间不足,最好提前将SDK移动到其他盘。方法如下:
在Tools->Android ->SDK Manager修改一下,若用Genymotion,也要统一SDK位置(下方有提示)。
③在Android Studio中下载API 23.01(必须此版本)
打开Android Studio(或在SDK目录中,打开SDKmanager下载亦可)在Tools->Android ->SDK Manager中下载部分API 23(不要全部勾选下载,浪费磁盘空间):
在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选:
Google APIs、
Android SDK Platform 23、
Intel x86 Atom System Image、
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image(共5项必装)
在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选
Android SDK Build-Tools 23.0.1(必须是这个版本)。
Android Support Repository(共2项必装)
④配置Android SDK的环境变量
⑤配置Android tools环境变量
将tools目录加入到Path中,方便使用Android工具,例如android avd或是adb logcat等。⑥启动一款Android模拟器
运行项目需要先启动模拟器,可以选择AndroidStudio自带模拟器或者第三方模拟器,如Genymotion等方式一:创建Android Studio自带虚拟机
Android Studio创建虚拟机关键选项:
注:用Android Studio自带的模拟器,最好选择Api 6.0 以上的版本,6.0以下版本,需要在开发者模式中配置nodejs包管理地址,徒增麻烦。
方式二:下载和安装Genymotion
选择带VirtualBox版下载安装:https://www.genymotion.com/download
注:genymotion需要依赖VirtualBox虚拟机,若未曾安装VirtualBox,请选择带VirtualBox版。
安装完后,将Genymotion中绑定的Android SDK修改为自己的。
启动虚拟机后,在终端执行命令“adb devices”可以看到,说明就可以调试了(该命令需要将sdk\platform-tools加入环境变量)。
4.安装和配置Node.js
①根据电脑系统,下载并安装:
http://nodejs.cn/download/注:下载.msi格式可以自动添加环境变量。
②验证是否安装成功
终端cmd下输入:npm -v
若出现版本号,则成功。若不成功,将安装目录加入环境变量再试试。
注:NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题
③设置连个标签和缓存文件夹:
在安装目录下创建两个文件夹:名字为:
node_cache和
node_global;
绑定两个文件夹,在终端执行命令(需修改为你的安装路径):
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
测试:
执行命令,能安装模块则成功:
npm install express -g
④配置环境变量:
将安装目录加入系统Path :D:\Program Files\nodejs;
将文件夹node_global加入用户环境变量Path中:
将node_global路径加入Path,后加一个英文分号:
D:\Program Files\nodejs\node_global;
将镜像地址改为国内的淘宝镜像,提高下载速度:
npm config set registry https://registry.npm.taobao.org[/code]npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
注:上述配置信息保存在:C:\Users\54121.npmrc
测试:终端输入命令,成功则出现下图提示:noderequire('express')5.安装React Native
①选择一个安装路径,创建名为 react-native 文件夹
例:在“D:\Program Files\“下,创建react-native文件夹,作为react-native的目录。②在上述文件夹中,将RN从GIt克隆到本地,在终端执行命令:
D:cd D:\Program Files\react-nativegit clone https://github.com/facebook/react-native.git[/code]③进入安装目录,执行命令安装:
D:cd D:\Program Files\react-native\react-native-cli && npm install -g④用 react-native –help 可以查看命令,若出现下方提示,则成功。
若出现下方提示,表示环境变量配置的node_global文件夹没有配置好,需重新配置:6.创建第一个React Native项目
①自己选定一个工作空间的文件夹
本文选择”F:\ReactNativeWorkspace“
注:工作空间文件夹最好不要和react-native的安装目录在一个磁盘,否则可能出现”operation not permitted“的错误(小坑)。②创建一个项目
在终端进入此文件夹,执行命令:react-native init hello,出现下图所示即成功。
注1:此过程React Native 自动下载依赖包(约70M),速度取决于连接国外的网速,由于我们将镜像优化为淘宝的镜像,只需10秒就完了。否则可能需要接近一个小时。
注2:创建新项目(执行react-native init )报错,可以清一下缓存再试:npm cache clean –force;再次提示,若一直报错“npm ERR! Error: EPERM: operation not permitted”,换个磁盘重新创建项目,不和RN安装目录在同一磁盘,成功解决。
注3:如果出现““Error: EPERM: operation not permitted”,原因还可能是项目名首字母出现大写,项目名需作为包名,需要小写,编译如下图:
ReactNative会自动创建名为“ReactNativeDemo”的项目,创建完成如下图:7.通过终端命令行运行项目
①初次启动需将项目模块下载到该项目中
终端进入自己项目根目录,执行本地安装命令:npm install②启动模拟器
终端启动命令:
获得模拟器名称(需将SDK\tool文件夹加入环境变量):emulator -list-avds
进入SDK的tool目录下,并启动模拟器,执行命令:G:cd G:\adt-bundle-windows-x86_64-20140321\sdk\tools && emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_23③进入项目目录运行项目,运行项目:
运行项目命令:cd I:\Workspace\ReactNativeProjectsreact-native run-android
成功运行项目后,如下图:
若出现错误:“Make sure you have an Android emulator running or a device connected”,
注:node.js访问地址,可以在浏览器中打开,若出现未报错的JS代码,说明nodeJS服务启动成功:
http://localhost:8081/app.js?platform=android&dev=true&hot=false&minify=false
nodeJS服务终端显示如下:
模拟器显示如下:8.通过Android Studio运行React Native项目
①打开项目,通过 File->open File ,找到项目文件下的android,打开项目。
注:若包启动管理器出现异常,则先进入项目根目录下,执行 npm start,启动包管理器服务器。
注:若提示更新gradle,先选择忽略,升级后可能造成与RN版本不匹配问题。9.安装 WebStorm JS编辑器
①下载地址
点击下载②激活,需要联网
点击第三个选项 license server,然后输入地址 :
http://idea.singee77.com 或者 http://im.js.cn:8888
点击discover server,然后点击Activate,如果能成功进入软件,说明成功了。③使用Webstorm运行项目
open项目,找到项目路径。
然后启动模拟器,共享一个启动模拟器的命令行,将其保存为.bat文件,直接双击就可以启动Android Studio自带模拟器了,而不用通过Android Studio启动,方便快捷,将G盘修改为你模拟器所在盘符和所在目录即可。G:cd G:\adt-bundle-windows-x86_64-20140321\sdk\tools && emulator -netdelay none -netspeed full -avd Nexus_5_API_23
点击运行即可,WS自带终端窗口,非常方便。10结束语
这一套系统算是搭建完成了,将来开发推荐使用ES6或者ES7吧,与时俱进。本文整合NodeJS包管理工具、ReactNative命令行工具、Git、Android SDK、Android 模拟器,形成一套完整的跨平台WebApp开发平台,关于IOS平台部分,以后再出,祝顺利。
相关文章推荐
- windows下搭建React Native for Android 开发环境
- React Native Windows下搭建React Native开发环境
- Windows系统下React Native开发环境搭建
- 基于windows平台的Android原生(Native)C开发环境搭建
- react-native for android windows开发环境搭建详细记录
- react-native 搭建windows下android开发环境
- ReactNative Windows Android开发环境搭建
- 在windows上搭建React-Native开发环境
- React Native开发环境搭建中的各种坑-Windows
- 【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法
- Window平台下React Native 开发环境搭建
- 在 windows 开发 reactNative 的环境 搭建过程 react-native-android
- Windows下搭建React-Native开发环境及异常处理
- Windows环境搭建React Native Android的开发环境
- React Native Windows Android开发环境搭建
- windows 下搭建react-native android 开发环境
- 在Windows下搭建React Native Android开发环境常见问题