虽然直接使用简单的文本编辑器就可以进行 React Native 开发,但一个好用的 IDE 可以让开发更加事半功倍。官方推荐使用 Atom+Nuclide 插件进行 React Native 开发。
关于 Atom 我之前有写过文章介绍,所以这里就不再说明了。本文主要介绍 Nuclide 插件的安装和使用。以及如何使用 Atom+Nuclide 进行 React Native 的开发调试。
一、安装配置
1,Nuclide介绍
Nuclide 是 Facebook 推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。优点如下:
- 提供自动完成和 JavaScript 类型检查
- 支持 Facebook 的 Flow JavaScript 类型检查器。
- 方便的 debug
- 进行版本控制,方便 diff
- iOS 模拟器 Log
2,准备工作
(1)如果电脑没有安装过 watchman 和 flow,安装一下。
1 2 |
|
(2)如果安装过,可以更新一下
1 2 |
|
(3)还要再装个 fbjs
1 |
|
3,Nuclide插件安装
(1)首先电脑上先安装好 Atom。具体可以参考我之前写的文章:Atom - 介绍和使用方法
(2)打开 Atom,点击顶部菜单栏“Atom”->“Preferences”
(3)在“Install”页面中搜索“nuclide”插件并安装。
虽然我们可以直接在 Atom 中搜索安装 Nuclide,不过这样做速度比较慢。建议还是在终端执行如下命令安装:
1 |
|
(4)安装完毕后打开 Atom,可以发现顶部菜单栏多了个“Nuclide”
4,Nuclide相关依赖包的安装
(1)点击菜单栏“Package”->“Settings View”->“Manage Packages”
(2)搜索“nuclide”,点击“Settings”
(3)勾选“Install Recommended Packages On Startup”
(4)关闭 Atom,再次打开这些依赖包便会开始自动安装。
(5)安装完毕后会看到界面上多了一条额外的 ToolBar。
5,flow路径的配置
(1)在终端中执行 which flow 命令查看 flow 路径
(2)点击菜单栏“Package”->“Settings View”->“Manage Packages”
(3)搜索“nuclide”,点击“Settings”
(4)滚动到 Nuclide-flow 这个区域,将上面查询到的 flow 路径填到 Path to Flow executable 中去。
二、基本使用说明
1,打开工程
我们点击界面左侧的“Add Project Folder”,可以打开一个现有的 React Native 工程。
2,flow语法检查设置
(1)首先打开我们工程里的 .flowconfig 文件,查看需要的 flow 版本。比如下面显示为:0.35.0
(2)在终端中运行 brew info flow 命令查看本机的 flow 版本(0.37.1)。版本太高了。
(3)运行如下命令安装 0.35.0 版本。(如果简单地将 .flowconfig 中版本改成 0.37.1,会发现提示很多 Error 错误)
1 |
|
(4)我们随便在页面上编辑保存下代码,编辑器便很快地检查出错误。
3,跳转到方法或者类型定义上
1 |
|
4,代码补全
(1)比如我们输入 fun
回车后会发现自动生产了相关的代码
(2)输入 do 并回车
三、运行调试程序
1,运行程序
我们可以直接通过 Nuclide 运行项目,而不需要使用 XCode。
(1)使用快捷键 command + shift + p 打开终端选项(command palette)并输入如下命令:
1 |
|
(2)选择 Nuclide React Native: Start Packager
(3)打开终端,进入到项目目录
1 |
|
(4)执行如下命令则启动 iOS 模拟器运行程序:
1 |
|
当然也可以指定使用的 iOS 模拟器型号:
1 |
|
执行如下命令则启动 Android 模拟器运行程序:
1 |
|
2,debug调试程序
(1)使用快捷键 command + shift + p 打开终端选项,并输入如下命令:
1 |
|
(2)选择 Nuclide React Native: Start Debugging
(3)在模拟器中按下快捷键:Command+D,选择 Debug JS Remotely
(4)这时会发现 Nuclide 中自动加载了 debug 窗口
(5)我们可以在代码中添加断点。在模拟器上使用快捷键 Command+R 重新刷新页面,可以发现程序运行后会停留在断电位置。
3,Element Inspector
通过 Element Inspector 我们可以很方便地查看应用程序中 React Native 组件分层结构。
(1)使用快捷键 command + shift + p 打开终端选项,并输入如下命令:
1 |
|
(2)选择 Nuclide React Inspector: Toggle
(3)出现如下界面表示正在等待模拟器 React Native 连接。
(4)在模拟器那边通过 command+d 弹出提示选项,点击 Debug JS Remotely 选项。连接上以后,当前项目的 UI 层次结构便会清晰的显现出来。
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1490.html