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={[&#39;#01FFD8&#39;, &#39;#C137E3&#39;, &#39;#8702ED&#39;]} steps={50} />,
    context.document.currentPage(),
  );
};

執行

npm run render

推薦學習：《react影片教學》

以上是react sketch是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！