将 Sketch 设计转换为 React Native - 工具还是编码商店？

Question

我正在和几个朋友（在其他框架方面非常有经验）一起开发一个新的 React Native 应用程序。我们正在尝试建立一个从 Sketch（或其他现代设计工具）到 RN 的良好工作流程，以便我们的设计师可以以最小的摩擦将其交给我们的开发人员，而开发人员无需进行大量的布局和设计修复。

到目前为止，从 Sketch 到 Zeplin 再到 RN 似乎效果最好，但并不完美。像 BuilderX 这样的其他工具似乎要糟糕得多，而且不是可用的工作流程。当你用谷歌搜索这个问题时，我们基本上已经尝试了显而易见的 5 或 6 件事。

我对一般建议感兴趣，但也有两个具体问题：

我们缺少更好的流程吗？在 WebFlow 中工作然后将该输出转换为 RN 会比 Sketch+Zeplin 更好吗？

是否有像 psd->html 服务这样的编码商店，它们采用 Sketch 设计并制作好的 RN 代码，并且可以用于正在进行的小型设计调整和其他事情？有什么建议吗？

如果所有其他方法都失败了，我们会在我们的团队中聘请一名开发人员在将设计转化为布局的步骤之间执行此操作，但我们几乎不需要这样做，我很想找到一个好的解决方案.

谢谢！

Answer 1

类似的困难可以在another post I have answered找到

除了sketch to react/html，我们还花很多时间在“React Native”上。 最初我们很乐观，因为我们将使用相同的技术来解决问题

• 基于反应的概念（虚拟 DOM 树）
• 支持弹性布局

但这并不容易，但仍然可以实现。我们遇到的主要问题是 react native 的 flex 与 CSS flexbox 不是 100% 相同，甚至不接近。 RN 的布局引擎使用的是yoga，这与 CSS flex 仍然不同。 有了差异，我们不得不将我们的两个代码生成器分别用于 react 和 RN，并添加许多特殊规则来适应差异。

经过6个月的战斗和迭代，我们在这个问题上取得了不错的进展。我们遇到的关键问题仍然是“结构调整”和“布局模型和设置”，这仍然需要某种人工干预。您可以查看我们的initial demo result（只是演示视频，尚未发布）以供参考。

Answer 2

我认为您需要先将文件从 Sketch 转换为 Framer (Framer X)。 Framer X 非常适合开发 React Native 应用程序。