天天看點

react-native 開發筆記 (三)react-native 開發筆記

react-native 開發筆記

es7 async

react native預設編譯配置可以編譯一部分es7文法的,async await是其中的一種。使用起來自然是很簡單,和koa 1.x 基本一緻,沒有差別。

多個路由頁面之間的通信

有這樣子一種場景

  1. 使用者進來,顯示未登入的首頁
  2. 使用者點選去登入,進入登入頁面
  3. 登入成功,跳轉回首頁,這時候要重新加載首頁的資訊,那怎麼通知首頁更新呢

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編碼字元串

可能還有一些其他的功能,待研究