react sketch是一個(gè)將react組件渲染到sketch的工具，是一個(gè)開(kāi)源庫(kù)；可以寫(xiě)出符合Sketch文檔規(guī)范的React組件，提供了一種更加便捷的方法來(lái)管理組件，可用“npm install –global skpm”進(jìn)行安裝。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react sketch是什么

React Sketch App是一個(gè)將React組件渲染到Sketch的工具。在Sketch中管理設(shè)計(jì)系統(tǒng)的資產(chǎn)非常復(fù)雜，容易出錯(cuò)且耗時(shí)。Sketch可編寫(xiě)腳本，但API經(jīng)常更改。React提供了完美的包裝器讓JavaScript開(kāi)發(fā)人員使用熟悉的方式構(gòu)建可重用文檔。

React – SketchApp 是一個(gè)開(kāi)源庫(kù)，為設(shè)計(jì)系統(tǒng)量身定制。它通過(guò)將 React 元素渲染到 Sketch 來(lái)連接設(shè)計(jì)和開(kāi)發(fā)之間的鴻溝。

這個(gè)神奇的開(kāi)源庫(kù)給設(shè)計(jì)師們提供了一個(gè)全新的設(shè)計(jì)工作流程：在時(shí)下最流行的 React 前端框架下用代碼進(jìn)行設(shè)計(jì)，并實(shí)時(shí)渲染到 Sketch 中審閱設(shè)計(jì)。細(xì)思恐極，在設(shè)計(jì)圈大紅大紫的 Sketch 雖說(shuō)占了開(kāi)源庫(kù)的一半名字，但其實(shí)擔(dān)當(dāng)?shù)闹皇且粋€(gè)瀏覽器的角色。真正留下的設(shè)計(jì)文檔則成了代碼。

安裝

npm install --global skpm

根據(jù)模板創(chuàng)建一個(gè)項(xiàng)目

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"     ]   }   }

創(chuàng)建Sketch入庫(kù)文件，這里在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(),   ); };

執(zhí)行

npm run render

推薦學(xué)習(xí)：《react視頻教程》