react sketch的概念是什么

蜗牛 互联网技术资讯 2022-04-21 26 0

这篇文章主要介绍了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的概念是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论