一個高顏值 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