导航：首页 > 开发技术 >

react sketch的概念是什么

发表于：2025-01-20 作者：千家信息网编辑

千家信息网最后更新 2025年01月20日，这篇文章主要介绍了react sketch的概念是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react sketch的概念是什么文章都会有所收获，下面我们一起来看

千家信息网最后更新 2025年01月20日react sketch的概念是什么

这篇文章主要介绍了react sketch的概念是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react sketch的概念是什么文章都会有所收获，下面我们一起来看看吧。

react sketch是一个将react组件渲染到sketch的工具，是一个开源库；可以写出符合Sketch文档规范的React组件，提供了一种更加便捷的方法来管理组件，可用"npm install --global skpm"进行安装。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react sketch是什么

React Sketch App是一个将React组件渲染到Sketch的工具。在Sketch中管理设计系统的资产非常复杂，容易出错且耗时。Sketch可编写脚本，但API经常更改。React提供了完美的包装器让JavaScript开发人员使用熟悉的方式构建可重用文档。

React - SketchApp 是一个开源库，为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。

这个神奇的开源库给设计师们提供了一个全新的设计工作流程：在时下最流行的 React 前端框架下用代码进行设计，并实时渲染到 Sketch 中审阅设计。细思恐极，在设计圈大红大紫的 Sketch 虽说占了开源库的一半名字，但其实担当的只是一个浏览器的角色。真正留下的设计文档则成了代码。

安装

npm install --global skpm

根据模板创建一个项目

skpm create my-app --template=airbnb/react-sketchapp cd my-app

使用

修改src/manifest.json

  "commands": [    {      "name": "My App Name: Sketch Components"      "identifier": "main",      "script": "./main.js"    }  ],  "menu": {    "isRoot": true,    "items": [      "main"    ]  }  }

创建Sketch入库文件，这里在src/manifest.json定义的是./main.js

import * as React from 'react';import * as PropTypes from 'prop-types';import { render, StyleSheet, View } from 'react-sketchapp';import chroma from 'chroma-js';import { times } from 'ramda';const styles = StyleSheet.create({  container: {    width: 480,    height: 480,    flexDirection: 'row',    flexWrap: 'wrap',    alignItems: 'center',  },});const Document = ({ colors, steps }) => {  const color = chroma.scale(colors);  return (          {times((i) => color(i / steps).hex(), steps).map((val, i) => (              ))}      );};Document.propTypes = {  colors: PropTypes.arrayOf(PropTypes.string),  steps: PropTypes.number,};export default () => {  render(    ,    context.document.currentPage(),  );};

执行