對於移動開發來說，可視化開發工具已經是必不可少的了。但是大多數的 iOS 和 Android 開發者，可能都沒怎麼用過 xCode 或 Android Studio 中的可視化工具。因為覺得通過拖拽組件的方式，在佈局的時候，精準度還是會差了一些，而且可能經常會加上一些多餘的參數。
最開始我也用的很少，不過自從去年的谷歌 IO 大會之後，我才發現，原來 Android Studio 的可視化佈局工具已經這麼好用了。從那之後，我在開發中就會經常用到了，而且將可視化和代碼佈局的方式相結合起來，效率可以提高不少。
然而 React Native 雖然是移動開發技術，但是用到目前為止，我還沒有遇到一個稱心如意的可視化開發工具。不說佈局可視化開發了，甚至連可視化都沒有做到。每次 UI 改動，都還是需要通過真機預覽。儘管有 Live Reload 和 Hot Reloading，但是這功能時不時的就會抽風，感覺並不是太穩定。
說了這麼多，其實就是想給大家推薦一個我最近發現的 React Native 可視化開發工具：draftbit
和其他平臺的可視化工具一樣，它可以通過拖拽的方式進行佈局。所有的屬性設置也可以通過面板進行調整。
而且 draftbit 結合了 Expo，可以直接通過二維碼的方式進行真機預覽。我覺得這才應該是移動開發該有的樣子，先在面板裡把 UI 調好了，再到真機裡去預覽，而不是反過來，直接通過真機調試佈局。
當佈局調試好之後，直接通過 View Code 功能將代碼導出，然後拷貝到我們自己的項目中。然後就可以愉快的寫業務邏輯了。我覺得要是官方後期再出個 WebStorm 插件就好了，可以一鍵把生成的代碼導入項目指定目錄下，那樣就太方便了。不過這個工具才起步，後面說不定真的會有。
可視化佈局工具，操作上還真沒什麼好說的，因為真的太簡單了，看一遍就都會了。而且我發現 draftbit 的“顏值”還挺高的，這也讓人多了幾分想使用它的“衝動”。
不過比較可惜的是，目前這款工具還處於內測階段，需要有邀請碼才能註冊使用。但是官網已經放開了登記通道，可以填寫自己的郵箱進行登記，如果後面開始公測了，就會及時收到邀請了。
官網地址：draftbit.com/#design
內測登記：draftbit.com
官方推特：@draftbit
鏈接：https://juejin.im/post/5c7400f0e51d4539ae678521
閱讀更多 一名攻城獅 的文章
