问题标签 [react-sketchapp]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 使用 react-sketchapp 将默认 HTML 和 CSS 渲染到 Sketch
我一直在测试react-sketchapp到目前为止看起来很整洁。除了渲染默认的草图元素(如Text
,等)之外View
,Image
是否可以渲染一个默认的 react 组件,其中包含带有 scss 样式的 HTML-Markup?
我尝试渲染以下Hello
-Component:
但我收到以下错误:
Could not find renderer for type 'span' flexToSketchJSON
是否可以将包括 html / css 在内的默认反应组件渲染到 Sketch?
sketch-3 - 将 react-sketchapp 与常规草图编辑相结合?
我一直在玩 react-sketchapp,试图了解它的功能。我喜欢可以在代码中捕获基本组件并将其放入 Sketch 以进行进一步编辑的想法……但是当我查看文档和示例时,我没有看到如何完成“进一步编辑”部分。
理想情况下,我想要的是让 react-sketchapp 生成一堆符号或图层,然后能够在 Sketch 本身中提供我自己的图层或符号覆盖。这样,我可以将 React 用于系统中可重用、稳定的组件,并使用 Sketch 来布置模型并围绕这些组件进行任何自定义工作。
据我所知,这是不可行的。当 npm 重新渲染 React 代码时,它会清除页面级别的所有内容并替换(而不是修改)所有符号,这意味着所有覆盖和自定义图层/画板都将丢失。
有没有办法用 react-sketchapp 完成我正在寻找的东西?谢谢!
javascript - 如何为文本之间的某些字符添加文本样式
我正在寻找解决此 React-SketchApp 错误的方法。
在发布此内容时,我的解决方案是在未嵌套的文本上使用 flexbox,并使其具有嵌套的外观。
风格:
这适用于文本在同一行的情况。但是如果说一个粗体元素在一个文本块内而不是在一个简单的行上,那我该怎么办?也许是一些花哨的 CSS 或 javascript 技巧?
javascript - 创建通用 React 组件
我们正在尝试使用 React 为我们的设计师和开发人员创建一个通用的 UI 组件库。换句话说 - 我们想要将我们的组件库呈现给react-dom
和react-sketchapp
。
我们希望指定一次结构、一次样式和一次行为。
react-primitives
我们可以通过or之类的项目到达那里(至少)styled-components/primitives
,但是这种方法基本上阻止了我们在 HTML 中包含任何语义。当您只需要使用 时Text
,您无法真正指定该文本是 a<p>
还是<h1>
.
人们以前是如何以这种方式处理共享代码的?我们如何基本上将 HTML(通过 JSX)渲染到 Sketch?
react-sketchapp - 在组件/视图中创建图表?
我想知道是否有人知道如何使用此工具创建图表(使用假数据作为符号)。
也许一个起点是这样的:
一位开发人员帮助我将上述代码作为起点。提前致谢!!
react-sketchapp - 在 React-Sketch 应用程序中对齐“自动”而不是“固定”的动态按钮和文本符号
也许有人可以在这里帮助一个 react-sketchapp 初学者。
通过出色的示例 Symbols 和 Styleguide 代码库,我已经能够开始我自己的 styleguide 以在工作中使用。
我的问题是,如何让文本在 Sketch 中呈现后,使其对齐为自动而不是固定?我希望它以这种方式从代码中渲染出来,而不必每次在画板上放一个符号时都在 Sketch 中这样做。
另外,有没有一种方法可以编写一个与您可以安装的“动态按钮”插件基本执行相同的按钮?
提前致谢。你们开发这个应用程序并把它交给我们真是太棒了!!!
reactjs - 带有纱线工作区的 Lerna monorepo 中的 React SketchApp 问题
我一直在为设计系统开发 PoC monorepo,在该系统中我尝试使用反应原语 + 反应草图应用程序渲染组件以绘制草图。我将 Lerna 与 yarn 工作区结合使用来管理不同包的依赖关系,这意味着文件夹结构如下所示:
在遇到两个包中具有相同依赖项(样式化组件)的问题后,我切换到将 lerna 与纱线工作区结合使用。这意味着您在 monorepo 的根目录中而不是包中拥有 node_modules。它解决了我以前使用样式组件时遇到的问题,它在 web-components-repo 中就像一个魅力,但是当尝试在 react-sketchapp-repo 中运行任何脚本时,我收到以下错误:
src/Document.tsx(50,46):错误 TS2304:找不到名称“上下文”。npm 错误!代码 ELIFECYCLE npm 错误!errno 2 npm 错误!@react-sketchapp-package@1.0.0 打字稿:一次:
tsc
npm ERR!退出状态 2 npm ERR!npm 错误!@react-sketchapp-package@1.0.0 typescript:once 脚本失败。npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。npm WARN 本地 package.json 存在,但缺少 node_modules,你的意思是要安装吗?
切换到 Yarn 工作区后,似乎 react-sketchapp 包没有找到 node_modules 依赖项。我尝试使用以下方法在 react-sketchapp-package 中创建指向 node_modules 的符号链接:
但这也不起作用,仍然是同样的问题......
由于这是我对 Lerna 和工作区的第一次体验,我将回顾我的步骤,看看是否有任何我错过的配置,但如果有人对如何解决这个问题有任何想法,我将不胜感激!
reactjs - 样式定义中具有 fontweight css 规则的组件会导致打字稿错误:没有重载匹配此定义错误
我正在使用basic-setup- typescript示例设置 react-sketchapp。由于与样式相关的类型错误,示例应用程序未编译。看起来fontweight
样式定义中带有 css 规则的 Text 和 View 组件会导致打字稿错误:No overload matches this definition error
考虑来自my-command.tsx 的这段代码片段
可以看到View
组件的样式定义有多个规则,而Text
组件只有两个。此示例导致上述错误error TS2769: No overload matches this call.
fontWeight
从组件中移除Text
允许代码编译和呈现示例。
移动fontWeight
到View
组件会再次导致打字稿错误。
看起来类型定义有问题,但我很难追踪它。我确实找到了一个类型文件 ( src/types
),其中TextStyle
扩展了ViewStyle
类型定义,并且确实包含 fontWeight 作为可选:
这里有几个问题:
- 我看到的错误是否表明类型定义存在问题或其他问题?
- 我有什么办法来解决这个问题?