一個高顏值 React Native 視覺化開發工具

Marno發表於2019-02-26

1.

對於移動開發來說,視覺化開發工具已經是必不可少的了。但是大多數的 iOS 和 Android 開發者,可能都沒怎麼用過 xCode 或 Android Studio 中的視覺化工具。因為覺得通過拖拽元件的方式,在佈局的時候,精準度還是會差了一些,而且可能經常會加上一些多餘的引數。

最開始我也用的很少,不過自從去年的谷歌 IO 大會之後,我才發現,原來 Android Studio 的視覺化佈局工具已經這麼好用了。從那之後,我在開發中就會經常用到了,而且將視覺化和程式碼佈局的方式相結合起來,效率可以提高不少。

然而 React Native 雖然是移動開發技術,但是用到目前為止,我還沒有遇到一個稱心如意的視覺化開發工具。不說佈局視覺化開發了,甚至連視覺化都沒有做到。每次 UI 改動,都還是需要通過真機預覽。儘管有 Live Reload 和 Hot Reloading,但是這功能時不時的就會抽風,感覺並不是太穩定。

2.

說了這麼多,其實就是想給大家推薦一個我最近發現的 React Native 視覺化開發工具:draftbit

和其他平臺的視覺化工具一樣,它可以通過拖拽的方式進行佈局。所有的屬性設定也可以通過皮膚進行調整。

一個高顏值 React Native 視覺化開發工具

而且 draftbit 結合了 Expo,可以直接通過二維碼的方式進行真機預覽。我覺得這才應該是移動開發該有的樣子,先在皮膚裡把 UI 調好了,再到真機裡去預覽,而不是反過來,直接通過真機除錯佈局。

一個高顏值 React Native 視覺化開發工具

當佈局除錯好之後,直接通過 View Code 功能將程式碼匯出,然後拷貝到我們自己的專案中。然後就可以愉快的寫業務邏輯了。我覺得要是官方後期再出個 WebStorm 外掛就好了,可以一鍵把生成的程式碼匯入專案指定目錄下,那樣就太方便了。不過這個工具才起步,後面說不定真的會有。

一個高顏值 React Native 視覺化開發工具

3.

視覺化佈局工具,操作上還真沒什麼好說的,因為真的太簡單了,看一遍就都會了。而且我發現 draftbit 的“顏值”還挺高的,這也讓人多了幾分想使用它的“衝動”。

不過比較可惜的是,目前這款工具還處於內測階段,需要有邀請碼才能註冊使用。但是官網已經放開了登記通道,可以填寫自己的郵箱進行登記,如果後面開始公測了,就會及時收到邀請了。

一個高顏值 React Native 視覺化開發工具

相關文章