reactjs - React、React Native 和 Angular 之间共享相同的风格/外观/设计/用户体验

Question

我们有 3 套产品，每套产品都基于不同的技术构建:React、React Native 和 Angular。

• 基于 React 构建的小组正在使用共享组件库，其文档以 Storybook 编写。 .
• 基于 React Native 构建的小组不共享任何代码
• 基于 Angular 的团队共享一份手动编写的自定义设计指南，其中代码被复制粘贴到每个单独的产品中。

由于这种分离，多种产品最终看起来和感觉都不同。我们希望转向共享的外观，这清楚地表明这些产品属于同一类。
但是，我们不想完全重写这些产品，而是更愿意重新设计每个产品的样式。

问题:有哪些策略/方法可以在这 3 种技术之间共享相同的风格和用户体验？

我们担心的是:

• 随着时间的推移，差异逐渐扩大
• 过多的手动测试
• 每种不同技术的过度重复开发
  • 澄清一下:我们不介意维护 3 个组件库(因为我们可能没有其他选择)，但我们不想多次修复样式错误。
• 引入变更的过程缓慢/困难

研究:

• 共享全局CSS:React-Native似乎只支持CSS-in-JS
• Web components可能可以通过包装器在所有 3 种技术中使用，但我(也许是错误的？)担心开发的简易性、支持......
• 每当一篇文章谈论这个主题时，他们实际上是在比较这 3 种技术之间的差异，而不是提出弥合差异的方法

Answer 1

您的建议没有本质上的错误，在不同级别上分割重用会带来不同的好处和挑战。 web-components 是 React 和 Angular 之间可以达到的最高级别，如果您想要跨平台的较低级别，我建议您查看设计 token ，使用类似 https://amzn.github.io/style-dictionary/ 来实现

你可以按照你想要的方式使用它 - 我们使用它来提供跨 Swift、Kotlin、React Native、Svelte 和 React 的通用主题间距、大小、颜色，但你可以更进一步并定义更多，只需查看它们的例子。它提供了一种很好的方法来获得样式系统的 JSON 表示，并在顶部使用 native 包装器来使用它。