返回 导航

React / React Native

hangge.com

React Native - 开发工具Atom+Nuclide详解（安装、使用、代码调试）

作者：hangge | 2017-01-17 08:00
虽然直接使用简单的文本编辑器就可以进行 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，安装一下。 
brew install watchman
brew install flow

（2）如果安装过，可以更新一下 
brew upgrade watchman
brew upgrade flow

（3）还要再装个 fbjs 
npm install fbjs

3，Nuclide插件安装 

（1）首先电脑上先安装好 Atom。具体可以参考我之前写的文章：Atom - 介绍和使用方法
（2）打开 Atom，点击顶部菜单栏“Atom”->“Preferences”

（3）在“Install”页面中搜索“nuclide”插件并安装。

虽然我们可以直接在 Atom 中搜索安装 Nuclide，不过这样做速度比较慢。建议还是在终端执行如下命令安装：
apm install nuclide

（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 错误）
npm install flow-bin@0.35 -g

（4）我们随便在页面上编辑保存下代码，编辑器便很快地检查出错误。

3，跳转到方法或者类型定义上 

command+鼠标左键

4，代码补全

（1）比如我们输入 fun

回车后会发现自动生产了相关的代码

（2）输入 do 并回车

三、运行调试程序

1，运行程序

我们可以直接通过 Nuclide 运行项目，而不需要使用 XCode。
（1）使用快捷键 command + shift + p 打开终端选项（command palette）并输入如下命令：
react native start

（2）选择 Nuclide React Native: Start Packager

（3）打开终端，进入到项目目录
cd ~/Documents/React/TTT

（4）执行如下命令则启动 iOS 模拟器运行程序： 
react-native run-ios
当然也可以指定使用的 iOS 模拟器型号： 
react-native run-ios --simulator "iPhone 5s"
执行如下命令则启动 Android 模拟器运行程序： 
react-native run-android


2，debug调试程序

（1）使用快捷键 command + shift + p 打开终端选项,并输入如下命令： 
react native debug

（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 打开终端选项,并输入如下命令： 
inspector

（2）选择 Nuclide React Inspector: Toggle

（3）出现如下界面表示正在等待模拟器 React Native 连接。

（4）在模拟器那边通过 command＋d 弹出提示选项，点击 Debug JS Remotely 选项。连接上以后，当前项目的 UI 层次结构便会清晰的显现出来。
评论

全部评论（4）

回到顶部