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

10,717 阅读2分钟

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 的“颜值”还挺高的,这也让人多了几分想使用它的“冲动”。

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