一个高颜值 React Native 可视化开发工具

对于移动开发来说，可视化开发 工具 已经是必不可少的了。但是大多数的 iOS 和 Android 开发者，可能都没怎么用过 xCode 或 Android Studio 中的可视化工具。因为觉得通过拖拽组件的方式，在布局的时候，精准度还是会差了一些，而且可能经常会加上一些多余的参数。

最开始我也用的很少，不过自从去年的谷歌 IO 大会之后，我才发现，原来 Android Studio 的可视化布局工具已经这么好用了。从那之后，我在开发中就会经常用到了，而且将可视化和代码布局的方式相结合起来，效率可以提高不少。

然而 React Native 虽然是移动开发技术，但是用到目前为止，我还没有遇到一个称心如意的可视化开发工具。不说布局可视化开发了，甚至连可视化都没有做到。每次 UI 改动，都还是需要通过真机预览。尽管有 Live Reload 和 Hot Reloading，但是这功能时不时的就会抽风，感觉并不是太稳定。

2.

说了这么多，其实就是想给大家推荐一个我最近发现的 React Native 可视化开发工具：draftbit

和其他平台的可视化工具一样，它可以通过拖拽的方式进行布局。所有的属性设置也可以通过面板进行调整。

而且 draftbit 结合了 Expo，可以直接通过二维码的方式进行真机预览。我觉得这才应该是移动开发该有的样子，先在面板里把 UI 调好了，再到真机里去预览，而不是反过来，直接通过真机调试布局。

当布局调试好之后，直接通过 View Code 功能将代码导出，然后拷贝到我们自己的项目中。然后就可以愉快的写业务逻辑了。我觉得要是官方后期再出个 WebStorm 插件就好了，可以一键把生成的代码导入项目指定目录下，那样就太方便了。不过这个工具才起步，后面说不定真的会有。

3.

可视化布局工具，操作上还真没什么好说的，因为真的太简单了，看一遍就都会了。而且我发现 draftbit 的“颜值”还挺高的，这也让人多了几分想使用它的“冲动”。

不过比较可惜的是，目前这款工具还处于内测阶段，需要有邀请码才能注册使用。但是官网已经放开了登记通道，可以填写自己的邮箱进行登记，如果后面开始公测了，就会及时收到邀请了。

• 官网地址 ： draftbit.com/#design
• 内测登记 ： draftbit.com
• 官方推特 ：@draftbit