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 (     <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視頻教程》