React Native 开发之IDE

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

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

1. Atom和Nuclide

1) Atom编辑器

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

Atom.png

2) Nuclide插件

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

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

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

Nuclide插件.jpeg

2. WebStorm

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

该新版本已经支持了React了,所以在现如今的开发阶段WebStrom已经算是支持性最好的IDE了,不过该是收费的,土豪忽略,至于破解版本看大家的了。

WebStorm.png

WebStorm.png界面.png

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

安装完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

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

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

Visual Studio Code.png

该扩展工具(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"

作者:朱源浩

来源:51CTO

时间: 2025-01-02 01:02:38

React Native 开发之IDE的相关文章

React Native开发之ATOM开发实用技巧

前面对React Native开发工具Atom做了一个详细的介绍,详见RN开发IDE详解. Atom作为一款前端开发利器,有很多的插件供我们选择,这里罗列常见的可以提高我们开发效率的插件给大家介绍一下. ATOM常用插件 1.simplified-chinese-menu Atom的简体中文语言包,完整汉化,兼容所有已发布的版本Atom. 2.tree-view-finder 左边菜单栏显示方式,类似Mac OS下的finder. 3.minimap 类似sublim text右边的代码缩略图.

React Native 环境搭建和创建项目(Mac)

 (一) 搭建基本环境(必要) 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm,也可以有选择的使用watchman .Flow. 1. 安装Homebrew Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件. Home-brew 的使用方式: 1)搜索软件:brew search 软件名,如brew search wget 2)安装软件:brew install 软件名,如brew

Windows环境下搭建React Native

随着移动开发越来越火热,前端开发也是有之前11年一直火热到现在,不过我发现从去年年底开发,Android和ios基本已经饱和了,特别是随着广大开源社区的中很多人贡献代码,开发已经不是什么问题了,所以现在好多公司招聘 都要求3年以上工作经验的,无外乎好多培训班出来的会写一些功能,会写一些界面实现,就出来上班了,但是深层次到framwork层,能够深入了解原理的还是少数,特别是当我们的项目遇到瓶颈之后,才能去看看你们怎么实现的.废话说道这里. 接下来我想说说面试,往往人家会要求会一点js,会一点ht

React Native移动开发资料库

本文整理了React Native开发中额优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native) 关于开源库类 Star 100+ ️ Star 200+ ️️ Star 500+ ️️️ Star 1000+ ️️️️ Star 2000+ ️️️️️ 关于博客和视频类 值得读读 ️ 建议阅读 ️️ 强烈推荐 ️️️ 目录 网址 完整开源项目 Libraries (Star 100+) 中文博客 英文博客 视频资料 网址 源代码 官方文档 reac

工欲善其事,必先利其器——React Native的 IDE

之前的文章中,我们已经对于在OS X系统上对React Native 的环境搭建,以及第一个实例做了讲解.所谓工欲善其事,必先利其器,对于开发者来说,选择一款比较好的IDE进行开发是一件很重要的事情.这篇文章就来比较和推荐以下几款工具:Nuclide.Sublime.WebStorm. Nuclide Nuclide是Facebook专门为React开发的基于Atom上的RN插件,因此,Nuclide拥有很好的语法补全.类型检查等支持. 本质上,Nuclide是Atom基础上的一系列插件集合.因

一位 iOS 开发者使用 React Native 的体验

当我初次听闻 React Native,认为它只不过是提供给 web 开发者尝试原生移动应用的一种方法.之前听说JavaScript开发者可以用 JavaScript 编写一个 iPhone 应用,我还真觉得有点酷,但是我很快摆脱了要自己来试试的想法.毕竟我已经将原生 iOS 开发作为一项业余爱好很多年了,而且几乎有两年时间就搞这个. 我已经做过一大堆 iOS 应用  -  其中有我为之骄傲的优秀应用.那些在 Xcode 中构建的应用都是使用 Objective-C 编写的,因为那是它一直就有的

如何用 React Native 创建一个iOS APP?

诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上--开发者只需学习一种语言就

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2147.html React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎. 更详细的介绍,大家可以搜索"facebook react native" 或 "taobao react native" 附上 React Native 官方网站:http://react

是时候了解React Native了

文章首发于简书,欢迎关注 随着科技的发展,手机开发也在向好的方向不停的转变.IOS和Android两大手机操作横空出世,称霸江湖.我们每开发一个手机软件最少都需要开发这两个终端. 两大操作系统都在不断的提升完善,能力越来越强大,这对于我们开发者是好事,因为用智能手机的用户越来越多. 话天下大事,分久必合,合久必分.这句话对于移动开发也是一样的. 这几年来,移动应用开发者做梦都希望有一个能跨平台的开发工具,让他们不要把同一个移动应用使用不同的开发语言写两遍.但跨平台开发工具的实现很难,直到Face