(一)前言
上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便,这一节将介绍开发ReactNative常用的IDE. 所谓工欲善其事必先利其器,做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐的Nuclide、VSCode。下面主要介绍其中的三款IDE—— webstorm、Nuclide以及VSCode。
(二)Nuclide常规安装以及配置
Nuclide是Facebook专门为React开发的IDE,官网推荐。但是Nuclide是在Atom基础上面提供了一系列统一的插件。所以我们需要首先安装Atom。
Nuclide项目官方地址:https://github.com/facebook/nuclide
2.1 Atom安装
Atom是一个开源版本的编辑器,非常强大以及完美体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:https://atom.io/ 去官网下载安装即可。
2.2 Nuclide 安装(不推荐安装方式)
Atom已经安装成功了,下面开始安装Nuclide,直接打开Atom软件,点击Atom-> Preferences打开Setting,然后点击install,输入nuclide-installer搜索,进行下载即可,如下图:
这种方式我们是选择插件下载进行安装,另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):
- 1
- 1
最后重启一下Atom即可。不过这两种方式都不太推荐大家使用,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom会很卡,然后提示找不到Nuclide相关模块。
2.3 Nuclide安装(强烈推荐安装方式)
Nuclide项目官方地址:https://github.com/facebook/nuclide,我们知道该项目是Facebook官方推荐的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
终端安装截图如下:
这样就安装完成,可以开始写React Native项目代码了。至于项目初始化以及编译运行方法,大家可以看前一篇文章哦!这里不再赘述。
(三) WebStorm IDE 介绍和安装
我相信做工Web前段的童鞋们,肯定对WebStorm IDE 非常熟悉,WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神奇”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:https://www.jetbrains.com/webstorm/ 。该新版本已经支持了React了,所以在现如今的开发阶段WebStorm已经算是支持性最好的IDE了,大家有兴趣可以下载使用一下哦!但是…….要收费的,要收费的。土豪忽略,至于破解版本看你自己了。
最后通过WebStorm打开我们一个已经存在的React Native项目。
(四)VSCode安装以及插件配置
直接讲VSCode安装实在突兀,先介绍一下VSCode。
在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了!
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及Linux,运行流畅,可谓是微软的良心之作……
4.1 安装Visual Studio Code
下载地址:https://code.visualstudio.com/Updates
下载下来直接拖到Application中就可以使用了。
4.2 安装VSCode扩展工具
如果在VSCode上开发React Native,安装一个扩展工具可以带来极大的方便以及提高开发效率。该插件可以提供以下这些功能:调试代码、命令面板终端快速执行Reac-native命令、代码智能补全、React Native API以及React对象搜索浏览。
使用效果演示如下:
安装步骤:
打开VSCode软件,按 Fn+F1;
键入 ext install React Native;
点击安装;
重启VSCode。截图如下:
如果你没有安装React-native,请参考前面的文章安装。React-native-cli要求在0.1.10以上版本;React-Native要求在0.19以上版本。
4.3 使用VSCode于React Native项目
第一:调试配置
首先导入项目到VSCode中,点击debugger icon ,然后点击配置icon
,然后选择React Native。如下图:
VSCode将在项目中生成一个 launch.json,这个文件包含一些默认配置,例如下面所显示:
你可以修改哪些配置或者添加新的配置到这个列表中。你也可以利用在配置文件中其它的字段,例如,你能修改 target 字段指定iOS调试的模拟器
第二:开始调试(Start debug session)
为了开始调试,通过配置下拉框选择一个调试项,然后点击运行箭头或者Fn+F5按键。这一步相当于Android平台运行的运行方式:react-native run-native;
iOS平台在Xcode中运行项目。
如图所示:
开发者可以调试Android平台的模拟器与设备,但是iOS平台的模拟器也是使用Fn + F5,但是iOS平台真机调试需要手动配置一些东西。配置如下:
调试iOS真机(Debugging on iOS device):
- 需要安装 ideviceinstaller 命令行:
brew install ideviceinstaller
- 配置launch.json文件,设置target为“device”
- 根据这篇文章真机配置 去修改jsCodeLocation IP在你的应用中
- 然后点击运行或者 Fn+F5 运行程序。
- 摇一摇设备,打开开发者菜单,并且选择”Debug in Chrome”
4.4 命令面板终端中使用React Native命令
在命令面板中,可以匹配React Native类型命令,并且选择命令,如下图所示:
- 运行Android命令,触发react-native run-android 来进行打开android app
- 运行iOS命令,触发react-native run-ios来进行打开并且在iOS模拟器中运行(iPhone 6)
- Packager命令,可以允许我们打开/关闭React-Packager
4.5 使用智能提醒(Using IntelliSense)
代码智能提醒可以帮助我们发现React Native中相关对象,方法以及参数,具体效果如下图所示:
4.6 开启智能提醒
【注意】:这部分涉及到老版本的VSCode和React Native工具。最新版的VSCode(1.1.1)支持智能提醒For Salsa,以前的老版本属于测试阶段,需要开启智能提醒。这些指导说明支持老版本(<= 0.10.9)
React Native智能提醒功能依赖于支持JSX语法的实验性特性在VS Code,打开了这些特性,你将会立马看到如下一个提醒当你打开一个React Native项目。如图:
该提醒是一次性的开启JSX支持,我们需要重启VS Code来让该智能提醒功能生效。同时我们可以验证是否已经正确安装,如果显示如下的状态条,就表示当前已经开启了智能提醒功能。
一旦你遵循以上的步骤进行开启智能提醒功能,你就可以在代码编辑器中看到React Native库中的对象,方法,参数相关提醒了。
下面是一些开启JSX支持,VS Code的配置做了一些如下修改:
①.环境变量VSCODE_TSJS=1设置来开启Salsa
②.Salsa需要最起码TypeScript 1.8版本,但是最终1.8发布版本还不可用。插件typescript@nexet安装在~/.vscode
③.在.vscode目录中生成一个setting.json文件,文件中使用typescript.tsdk来指向typescript@next安装的位置
④.在项目根目录中创建tsconfig.json文件,并且配置allowsJs:true来允许TypeScript来处理JavaScript文件
⑤.React Native的Typing复制到.vscode目录中
4.7 存在已知问题:
下面列表一下,在使用本插件中可能会遇到的一些已知的问题。
①.调试器不能关闭断点: 该调试器仅仅会在通过VS Code打开packager服务中运行。如果packager在VS Code外部运行需要关闭packager
②.’adb’ 命令没有找到: 如果你遇到adb:command not founc,那么你需要进行配置android环境变量了。最好把PATH和ANDROID_HOME环境变量都配置上.
③.目标iPhone 6不工作:当使用iPhone6运行app的时候,该为一个已知的问题,详细请点击:
最后这里这边查看已经解决的所有的问题。