关闭

React Native常用IDE推荐与安装配置

16590人阅读 评论(1) 收藏 举报
分类:

React Native常用IDE推荐与安装配置

(一)前言

上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便,这一节将介绍开发React Native常用的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安装):

apm install nuclide

最后重启一下Atom即可。不过这两种方式都不太推荐大家使用,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom会很卡,然后提示找不到Nuclide相关模块。

2.3 Nuclide安装(强烈推荐安装方式)

Nuclide项目官方地址:https://github.com/facebook/nuclide,我们知道该项目是Facebook官方推荐的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单:

git clone https://github.com/facebook/nuclide.git
cd nuclide
npm install
apm link

终端安装截图如下:
这里写图片描述
这样就安装完成,可以开始写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的时候,该为一个已知的问题,详细请点击:

最后这里这边查看已经解决的所有的问题。

转载自:http://www.lcode.org/vscode-react-native-tools/

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:105437次
    • 积分:1695
    • 等级:
    • 排名:千里之外
    • 原创:68篇
    • 转载:22篇
    • 译文:3篇
    • 评论:11条