什么是 Sketch？
Sketch 是一款非常受欢迎的图形设计软件，特别针对 iOS 和 Mac 设计。在 Sketch 中你可以非常方便地做出一些很棒，很有创意的设计。但是，一些开发者们在使用 Sketch 进行设计时，会遇到一些问题。比如，开发者在使用 Sketch 设计出了一些组件，但是却无法将这些组件直接用于前端开发。
什么是 react-sketchapp？
针对这样的问题，有一个很好的解决方案就是使用 react-sketchapp。react-sketchapp 是一个能够帮助开发者将 Sketch 设计的组件快速翻译成源代码，并且能够在 React Native 中将这些组件渲染出来。react-sketchapp 是 Facebook 出品的一款可以将 Sketch 设计的组件转换成代码的工具，让开发者可以快速完成组件的开发。当然，使用这个工具也需要掌握一些相关技能和知识点。
环境搭建
在开始使用 react-sketchapp 之前，我们先需要搭建一个环境。这里我们主要需要安装以下工具：
- Sketch 53 或以上版本
- Node v10 或以上版本
- npm
- react-sketchapp
安装 react-sketchapp
安装 react-sketchapp 非常的简单，我们只需要在终端中输入以下命令即可：
npm i -g react-sketchapp
即可安装，安装完成后可以使用 react-sketchapp -h 来查看命令行帮助。
编写 react-sketchapp 组件
准备好了环境之后，接下来就是要用它来开发我们的组件。我们以一个非常简单的按钮组件作为例子。我们首先需要在 Sketch 中将我们的按钮设计出来，然后再将这个组件转换成为代码。
1. Sketch 中设计按钮
首先，我们需要在 Sketch 中设计一个按钮。这里我们使用 Sketch 的基础组件来快速创建一个按钮。
2. 导出按钮
完成了 Sketch 设计之后，我们需要将我们的按钮导出为一个 PDF 文件。Sketch 中可以直接导出为 PDF 文件，Save As -> 切换为 PDF 格式。
3. 转换按钮
接下来，我们需要使用 react-sketchapp 提供的命令行工具来将我们的 PDF 文件转换成代码。在终端中输入以下命令：
react-sketchapp init MyButton ~/path/to/my/button.pdf
这里，MyButton 就是我们要创建的组件名称，~/path/to/my/button.pdf 就是我们导出的按钮 PDF 文件的存放路径。
4. 编写代码
运行上述命令后，会在当前路径下创建一个 MyButton 目录，内部包含了 MyButton.js 和 MyButton.sketch.json 两个文件。其中 MyButton.js 文件就是我们要编写代码的文件，我们可以使用自己习惯的编辑器打开这个文件进行编辑。
我们来看一下这个 MyButton.js 文件的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---------- - ---- ------------------
----- -------- - -- -- -
------
------------------------------
--------------------
--
--
----- ------ - -------------------
------ -
------ ----
------- ---
--
---
------ ------- ---------这个文件非常简单，我们用了一个 react-sketchapp 的组件 Image，将我们的 PDF 图片进行渲染出来。同时，我们也定义了这个图片的样式。到此，我们的 react-sketchapp 组件就编写成功了。
渲染组件
在编写完 react-sketchapp 组件之后，我们需要将其应用到渲染上。这里我们采用 React Native 来渲染出我们的组件。
1. 安装 React Native
安装 React Native 非常的简单，我们只需要在终端中输入以下命令即可：
npm install -g react-native-cli
即可安装，安装完成后可以使用 react-native -h 来查看命令行帮助。
2. 创建工程
创建工程也非常简单，我们只需要在终端中输入以下命令即可：
react-native init MySketchApp
这里，MySketchApp 就是我们要创建的工程名称。
3. 编写代码
编写代码也非常简单，我们只需要在 App.js 文件中渲染我们的 react-sketchapp 组件即可。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- -------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
--------- --
--
-
-到此，我们就成功地将我们的 react-sketchapp 组件应用到了 React Native 中。
总结
通过学习本篇文章，我们能够了解到如何使用 react-sketchapp 将 Sketch 设计的组件转换成为源代码，并且在 React Native 中渲染出来。相信在使用 react-sketchapp 进行开发时，本篇文章能够给大家带来一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0d81e8991b448d8b44