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

1.

对于移动开发来讲，可视化开发工具已是必不可少的了。可是大多数的 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