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 ( <view style={styles.container}> {times((i) => color(i / steps).hex(), steps).map((val, i) => ( <view name={val} key={val} style={{ backgroundcolor: val, margin: 2, // prettier-ignore height: 96 - (2 * i), // prettier-ignore width: 96 - (2 * i), borderradius: 2 * i, }} /> ))} </view> );};document.proptypes = { colors: proptypes.arrayof(proptypes.string), steps: proptypes.number,};export default () => { render( <document colors={['#01ffd8', '#c137e3', '#8702ed']} steps={50} />, context.document.currentpage(), );};
执行
npm run render
推荐学习：《react视频教程》
以上就是react sketch是什么的详细内容。