造型反应原生

Posted 2021-04-01

我参与了一个项目，几个人正在做一个反应原生项目。

我需要找到一种方法来分离样式代码的样式，以一种UI开发可以在不需要代码开发人员的情况下工作（从我的角度来看，样式是定义UI结构的人，放置组件屏幕，并定义他们的颜色和视觉表示）。

我的问题是：

• 样式开发人员可以使用任何工具来创建样式并导出合适的文件以包含到项目中吗？
• 如何确保两个团队在不重复其他团队工作的情况下工作？我来自WPF和Web开发，在那个系统中，UI和代码之间有很好的分离。例如，在MVVM中，造型师和编码器应该拥有的唯一协议是组件的名称，并且造型师可以使所有样式和编码器都可以完成所有编码而无需重复他们的工作（我知道这已经过度简化，但概念是存在的，一个好的团队可以使用它）。在Web开发中，设计师创建html和CSS，编码器使用angolarJS或JQuery来控制组件并附加到他们的事件。
• 在我们的造型团队中，我们使用skitch，这个工具可以生成合适的样式代码来反应原生吗？如果是，那么工作流程是什么？
• 关于如何最好地将样式与编码区分开来的任何其他建议。

答案

我对这个问题没有最好的答案，但我可以根据自己的经验向您提供一些反馈和提示。

对于像MVVM中那样分离UI和业务代码，可以将类分开

1. 容器类（处理所有业务逻辑）和
2. 查看类（仅负责演示），将样式定义为可以使用某些通用主题提供程序的单独类

可以有多个视图类（ios，android，如果可能的Web），但它们都将使用主容器类用于业务逻辑（更多细节请参阅第1个链接）

参考：

• https://blog.cloudboost.io/react-native-a-deep-dive-part-1-5a982f847d20
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

对于样式，您可以选择一些将通用主题作为对象的主题提供程序类。编码器可以在组件中使用这些样式。主题将在提供者的根类中定义。如果您仔细重用这些样式，则只需在一个位置更新样式以更新所有样式。还有黑暗和光明主题的支持。

参考：

• https://github.com/callstack/react-native-paper
• https://github.com/xinthink/react-native-material-kit
• https://github.com/xotahal/react-native-material-ui