reactsketch的概念是什么
这篇文章主要介绍了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 ({times((i) => color(i / steps).hex(), steps).map((val, i) => ( ); }; Document.propTypes = { colors: PropTypes.arrayOf(PropTypes.string), steps: PropTypes.number, }; export default () => { render())} , context.document.currentPage(), ); };
执行
npm run render
关于“react sketch的概念是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“react sketch的概念是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
网站名称:reactsketch的概念是什么
网页网址:http://scyanting.com/article/ppoech.html