iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
Mobile Development

小孩子才做選擇 ! Flutter & React Native 我全都要系列 第 23

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

  • 分享至 

  • xImage
  •  

如何做出設計師指定的按鈕呢?

https://ithelp.ithome.com.tw/upload/images/20191009/20104220ECjneGj2Ph.png

首先,先叫他畫圖,最好給 XD,AI 轉存 SVG 常常有不明問題!

https://ithelp.ithome.com.tw/upload/images/20191009/20104220XTZ6Zhmt0H.png

確認沒有任何具有透明度的圖層後,轉存工作區為 SVG

https://ithelp.ithome.com.tw/upload/images/20191009/20104220qrQLfawhUI.png

用文字編輯器打開

https://ithelp.ithome.com.tw/upload/images/20191009/20104220FEVn9hOhcn.png

打開 這個網站 後,Global 選取 React Native ,貼上你的 SVG 代碼。(耐心等待)

https://ithelp.ithome.com.tw/upload/images/20191009/20104220JYir1Xj7gT.png

打開 你的專案後,新增 btn.js 貼上你轉換後的 code。

https://ithelp.ithome.com.tw/upload/images/20191009/20104220dgRidSyJW0.png

範例 code

記得安裝套件 react-native-svg

https://github.com/react-native-community/react-native-svg
react-native-svg
import SvgMsg from '../img/icon/icons/btn_done';
<TouchableHighlight  onPress={() => {
    this.DONEModalVisible(!this.state.modalPhoneVisible);}}>
    <SvgMsg  />
</TouchableHighlight>

上一篇
[Day22]React Native GO TO Flutter 之先弄出版面再說
下一篇
[Day24] react-native-高美濕地!?
系列文
小孩子才做選擇 ! Flutter & React Native 我全都要32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言