iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0

前幾天的夜裡與公司的設計師姊姊討論到這個嚴肅的問題.....

身為工程師的我我決定來分享一下

PNG 不透明背景

https://ithelp.ithome.com.tw/upload/images/20200928/20104220en6tdlXvWy.png
好處? 方便出圖,可以作為其他素材給文職人員使用
缺點? 受到解析度影響,icon一多會很可怕,通常只用在上架的icon
https://ithelp.ithome.com.tw/upload/images/20200928/201042208kMTAyMuBG.png

PNG 透明背景

https://ithelp.ithome.com.tw/upload/images/20200928/20104220AVOUjMaMZ2.png
好處?沒背景,可以自由更換 background-color
缺點? 解析度依然受到限制

SVG 不帶背景

https://ithelp.ithome.com.tw/upload/images/20200928/20104220PEXKXBQgJC.png

好處?不受到限制解析度,需給定長寬比例(可以寫個元件來使用比較方便)
缺點? 非設計人員有很大的機率不會處理,非前端工程師可能也不熟悉。

可是?RN 沒有支援SVG阿大大...

react-native-svg!如何做出設計師指定的按鈕?

不過圖片切換的TabBar是如何做出來的呢?

https://ithelp.ithome.com.tw/upload/images/20200928/20104220uvTiw0wybX.png

嘿嘿,想不到吧,還可以結合Lottie喔


上一篇
[Day:13] 這是是我們製作的資料,可以幫我存一下嗎?ψ(`∇´)ψ
下一篇
[Day:15] 媽媽~我也想要那個酷酷的TabBar ||Φ|(|´|Д|`|)|Φ||
系列文
ReactNative 懶人開發之路,薪水小偷練成日記(X31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言