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 (
    <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 sketch的概念是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react sketch的概念是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。