React Native 开发之IDE

移动开发
做React Native开发也和其他应用开发一样,最好有一个比较好的IDE工具。那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的Nuclide。下面我们主要讲解一下后面两款工具。

个人暂时使用Atom和Nuclide,虽然有些不方便,不过喜欢界面以及安装简单哈哈,之后可能尝试下别的。

译注:React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。

1. Atom和Nuclide

1) Atom编辑器

Atom是一个开源版本的编辑器,有着非常强大以及完美的体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。

官网下载安装:https://atom.io

Atom.png

2) Nuclide插件

Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档

直接打开Atom软件,点击Atom->Preferences打开Setting,然后点击install,输入nuclide-installer 搜索,进行下载即可,如下图:

Nuclide插件.jpeg

两者具体的下载安装使用教程可参考:

http://blog.csdn.net/hello_hwc/article/details/51612139

2. WebStorm

相信做过Web前端的童鞋们,肯定对WebStorm IDE非常的熟悉WebStorm 是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

该IDE官网地址:https://www.jetbrains.com/webstorm/ 。该新版本已经支持了React了,所以在现如今的开发阶段WebStrom已经算是支持性最好的IDE了,不过该是收费的,土豪忽略,至于破解版本看大家的了。

WebStorm.png

WebStorm.png界面.png

官方下载地址:https://www.jetbrains.com/webstorm/download/

看到有文章写了个破解方法(未尝试过):

安装完webStorm之后,激活界面选择第二个License server,下面输入框输入http://idea.lanyus.com, 确定即可

3. Sublime Text

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

Sublime Text.png

下载以及与React Native相关的配置可参考以下两篇文章:

http://www.jianshu.com/p/2ddfff095e90

http://www.jianshu.com/p/bbb2e998a2e2

4. VSCode(正在尝试,感觉自动补全比较好用)

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

官方下载地址:https://www.visualstudio.com/en-us/products/code-vs.aspx

Visual Studio Code.png

插件React Native Tools:https://github.com/Microsoft/vscode-react-native

该扩展工具(React Native Tools)给React Native项目提供了一个开发环境。你可以调试你的代码、通过命令面板终端快速的运行react-native命令、并且支持代码智能补全,对象搜索浏览、方法、参数以及其他一些React Native API。

安装React Native Tools:

1)调出扩展窗口

方式一:按f1,搜索ext,调出扩展窗口

调出扩展窗口@2x.png

方式二:若左侧工具栏有扩展图标,直接点击进行扩展图标调出扩展窗口

2)搜索并安装React Native Tools插件,install后要enable:

QQ20160805-0@2x.png

3)重启编辑器完成。

调试(Debugging)

1.安装调试环境(Setup debug environment)

在菜单中点击调试图标 ,然后点击configure齿轮样子的"设置"图标,选择React Native(调试环境设置)。

VSCode会生成一个launch.json文件保存在项目,同时里面会有一些默认的数据配置,如下图所示:

调试.png

上面的配置文件你可以修改这些配置信息,或者往列表中添加新的项。你也可以在这些配置信息中使用其他属性。

例如:你可以修改target属性来指定iOS调试的模拟器

2.开启调试(Start debug session)

为了开始调试,通过配置下拉框选择一个调试项,然后点击运行箭头或者F5按键.

你可以调试Android模拟器,Android设备或者iOS模拟器中的应用,当前插件提供iOS设备的支持。有关使用VS Code进行调试的更多详细信息请点击查看

3.使用iOS设备调试(Debugging on iOS Device)

采用iOS设备调试需要完成以下一些常规步骤:

①.在APP中改变jsCodeLocation IP,更多详细的步骤请点击查看

②.从调试配置下拉框选择Debug iOS并且按F5按键

③.摇一摇设备,打开开发者菜单,并且选择"Debug in Chrome"

责任编辑:武晓燕 来源: 简书
相关推荐

2017-09-11 14:35:34

编辑器开发环境React

2023-02-09 07:15:52

开发FlutterReact

2016-01-13 09:37:00

IDC混合开发react nativ

2021-07-25 21:36:24

Windows操作系统功能

2016-10-13 19:01:59

React NativUbuntu

2019-08-29 09:00:55

开发Flutter框架

2015-03-30 12:13:23

React NativiOS

2015-09-22 09:50:36

FacebookAndroid

2016-08-12 08:49:46

React NativFacebookNative

2016-07-29 13:47:05

RethinkDBWeb

2024-07-08 00:00:07

2023-06-24 17:09:06

React前端

2017-01-04 10:18:00

React NativScrollViewAndroid

2017-01-11 18:44:43

React Nativ触摸事件Android

2021-07-26 08:00:00

开发工具Flutter

2015-08-06 17:15:28

2016-08-15 13:34:37

React NativiOSjs入口

2017-03-09 13:29:04

ReactNative JSPatch

2017-03-21 21:37:06

组件UI测试架构

2024-01-19 09:03:06

ReactTypeScripFlexbox
点赞
收藏

51CTO技术栈公众号