React Native 开发工具

最新推荐文章于 2026-04-26 11:29:01 发布

原创最新推荐文章于 2026-04-26 11:29:01 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react-native #RN #react #开发工具 #开发

iOS_code 同时被 2 个专栏收录

5 篇文章

订阅专栏

React-Native

3 篇文章

订阅专栏

本文介绍了React Native的开发工具，重点推荐了VSCode。文章列举了多种编辑器，如Atom、WebStorm、Sublime Text等，但作者个人偏好使用VSCode。此外，提到了Exponent和ReactXP两个框架。

React Native Develop Tool

开发工具提供 `自动补全`、`语法检查`, 方便我们开发。

1、* Atom * + * Nuclide * + * watchman *

(1)Atom 是github专门为程序员推出的一个跨平台文本编辑器。
      具有简洁和直观的图形用户界面，并有很多有趣的特点：
            支持CSS，HTML，JavaScript等网页编程语言。
      它支持宏，自动完成分屏功能，集成了文件管理器。

(2)`watchman`+ `flow` + `eslint` + `Yarn`

2、* webStorm *

  是 `jetbrains公司`(http://www.jetbrains.com)旗下一款JavaScript 开发工具。
  目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
  与 `IntelliJ IDEA`(https://www.jetbrains.com/idea/ )同源，继承了IntelliJ IDEA强大的JS部分的功能。

3、* Sublime Text * 需要安装插件，才可进行预编译

# sublime插件
  ReactJS：支持React开发，代码提示，高亮显示
  Emmet：前端开发必备
  Terminal：在sublime中打开终端并定位到当前目录
  react-native-snippets：react native 的代码片段
  JsFormat：格式化js代码

4、* VS Code（Visual Studio Code）*

# 插件
  React Native Tools：微软官方出的ReactNative插件,非常好用
  Reactjs code snippets：react的代码提示，如componentWillMount方法可以通过cwm直接获得
  Auto Close Tag：自动闭合标签
  Auto Rename Tag：自动重命名标签，配合上面的插件使用，基本上能赶上IntelliJ IDEA系的功能了
  Path Intellisense：文件路径提示补全

5、* Vim 编辑器 *

# 需要翻墙

  为 React-JSX 设置 Vim：https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015
  License：开源
  支持平台：Mac、Linux

# Vim 插件
  vim-jsx - 提供 JSX 的语法高亮和缩进。
  vim-react-snippets - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。
  vim-babel - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段

6、* GNU Emacs 编辑器 *

  官网：https://www.gnu.org/software/emacs/
  官方文档：https://www.gnu.org/software/emacs/documentation.html
  针对 Ract Native 的初始设置：http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/

# 具有用于下载和安装扩展的包系统。
  GNU EMACS 是一个可扩展、可定制、免费、自由的文本编辑器。
  web-mode.el - 它是一个自主的 emacs 主模块，用于编辑 Web模板。它与许多语言兼容，包括 JSX（React）

7、* Spacemacs 编辑器 *

Spacemacs 是一个社区驱动的 Emacs 发行版 - 最好的编辑器既不是 Emacs 也不是Vim，它是 Emacs 和 Vim 相结合！
  React layer - 适用于 React 的 ES6 和 JSX 配置层。
  它将自动识别 .jsx 和 .react.js 文件。一个用于 React集成的包层。

官网：http://spacemacs.org/
Github 项目地址：syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)
官方文档：http://spacemacs.org/doc/DOCUMENTATION.html

8、 * Deco IDE *

Deco 是专为 React Native 打造的 IDE。它是一个用于编写 React Native 应用程序的一体化解决方案，
  无需任何环境设置即可下载和使用。Deco 专注于组件重用，并支持用户对 UI 的实时编辑，
  从而改进了React Native 开发工作流程。

优点：
  (1)可以直接在编辑器里启动模拟器。
  (2)当然最吸引人的是直接拖拽一些组件到界面。
  (3)可以自动创建新项目、搜索开源组件并插入到项目中。
  (4)还可以实时地可视化地调整用的界面。

官网：https://www.decosoftware.com/
Github 项目地址：decosoftware/deco-ide(https://github.com/decosoftware/deco-ide)
官方文档：https://www.decosoftware.com/docs
支持平台：Mac（仅适用于iOS）

9、 * TextMate 编辑器 *

官网：https://macromates.com/
官方文档：http://manual.macromates.com/en/
License：收费
支持平台：Mac

# 插件
  javascript-jsx.tmbundle - 用于JSX（React）的 Textmate Bundle。目前支持语法高亮。

10、* RubyMine *

[* jetbrains公司 *](http://www.jetbrains.com)
  是一个为Ruby 和Rails开发者准备的 IDE，其带有所有开发者必须的功能，
  并将之紧密集成于便捷的开发环境中，号称最智能的Ruby和Rails的IDE，
  能够大大增加Ruby和Rails开发者的开发效率

我用的是 VSCode

很多人选择 1、vim 2、sublime 3、VSCode (我听到的心声是这样顺序)

框架

1、* Exponent * 只支持全部RN-js代码开发的框架

是一套开发环境，还带有一个已上架的空应用容器。
  这样你可以在没有原生开发平台（Xcode或是Android Studio）的情况下
  直接编写React Native应用（当然这样你只能写js部分代码而没法写原生代码）。

2、* ReactXP *

是微软Skype团队维护的一个`框架`。
  ReactXP 的意思是 React Cross Platform。
  那如何跨端的呢？在 React 和 React Native 封装一个抽象层，也是一个子集，提供跨平台的 API。
  底层 iOS/Android 就是跑RN，Web 就是 React，Windows 10 及以上采用自家的 UWP，
  https://wapbaike.baidu.com/item/uwp/4236943
  适配 React Native，Windows 10 以下其他平台就用 Electron 把 Web 包起来……跨端了。

更多博客内容