在 React Native 中设置样式

Question

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

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

我的问题是：

样式

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

• 在我们的造型团队中，我们正在使用 skitch，这个工具可以为 react native 生成合适的风格代码吗？如果是，工作流程是什么？

• 关于如何在 react native 中最好地将样式与编码分开的任何其他建议。

Answer 1

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

为了像在MVVM中那样分离UI和业务代码，您可以将类分开为：

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

可以有多个视图类(iOS，Android，如果可能的话Web)，但它们都将使用主容器类进行业务逻辑(有关更多详细信息，请参阅第一个链接)

指：

• 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