react-native 開發筆記
es7 async
react native預設編譯配置可以編譯一部分es7文法的,async await是其中的一種。使用起來自然是很簡單,和koa 1.x 基本一緻,沒有差別。
多個路由頁面之間的通信
有這樣子一種場景
- 使用者進來,顯示未登入的首頁
- 使用者點選去登入,進入登入頁面
- 登入成功,跳轉回首頁,這時候要重新加載首頁的資訊,那怎麼通知首頁更新呢
react-native自帶了RCTDeviceEventEmitter子產品,用來做事件通信的。這個子產品的設計思想和nodejs的event子產品類似。
需要注意的是,此子產品隻需要引入一次放置到一個檔案裡,然後其他子產品通通引入這個檔案,才可以通信。不能每個檔案都引入這個子產品,那樣子就是單獨的事件執行個體,無法進行通信。
檔案上傳
比如使用者需要修改頭像,這時候就會用到攝像頭和選擇圖檔,社群有現成的子產品可以使用
使用到的元件:
react-native-image-picker:調用攝像頭和選取圖檔
react-native-image-resizer:圖檔壓縮子產品
複制
get到一個技能點就是,formData的使用。是的react-native裡面也內建了這個方法
formData可以附加檔案,以前在web上,我隻是使用了file擷取的檔案,直接append進去。
今天得到一個新技能
let formData = new FormData()
formData.append('avatar', {uri: resizedImagePath, name: response.fileName, type: 'multipart/form-data'})
複制
其實append的第二個參數就是一個File執行個體,根據file.type可以決定很多東西
如果是
multipart/form-data
,uri就可以是一個圖檔路徑
如果是
image/jpeg
,uri可以是一個圖檔的base64編碼字元串
可能還有一些其他的功能,待研究