造型反应原生

Question

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

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

我的问题是：

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

• 在我们的造型团队中，我们正在使用skitch，这个工具可以生成合适的样式代码以反应原生吗？如果是，那么工作流程是什么？

• 关于如何最好地将样式与编码原生分开的任何其他建议。

Answer 1

我对这个问题没有最好的答案，但我可以为你提供一些反馈和答案。我的经验提示。

用于分离UI＆amp;像MVVM中的业务代码，您可以将类分开为

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

可以有多个视图类（iO，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