文章是寶寶自己寫的,你可以轉走,標明哪來的就行王亟亟的大牛之路
國慶這些天要么旅游要么WOW,感覺整個人都廢了。。
直接從黃種人曬成了非洲大酋長。。然而還是無橙,這禮拜要做7天,昨天把單元測試的東西整完后今天下午抽出時間繼續學習,然后就補一篇RN 主件的文章,知識點源于官方文檔
效果圖
第一種為:加載RN項目下的圖片
第二種為:加載網絡圖片
第三種為:加載Android項目的圖片資源+圖片作為背景
加載RN項目下的圖片
如果你需要引用RN項目目錄下的圖片資源,就像使用html中的引用一樣,使用相對路徑去找
目錄如下
在我們的android.js同級有一個img文件夾,里面有一個sample.jpg文件,而它就是我們所需要的source={require('./img/sample.jpg')}/>
這樣就可以使用到我們的圖片了給source屬性利用require()給其傳第一個圖片地址,然后就可以渲染到上
當然有時候你的值是可變的,那也可以傳入一個對象去引用,如
但是以上寫法不是很好,我們盡量在渲染的時候給出正確的引用值,可以這樣:
一般來說我們的圖片資源本身大小不可控,所以我們會給控件預設一個尺寸,像這樣
加載網絡圖片
我們的APP不可能是一個純離線產品,那網絡圖片就是必不可少,RN加載圖片就比遠程環境方便,給出正確的UR,就和網頁加載圖片一樣
還是和家在本地圖片一樣,官方希望大家給定控件的尺寸。
因為你的圖片尺寸不可控,當加載出來后把用戶第一次看到的布局給整變形了,這是一個很不好的用戶體驗。
Note:這里補充下 我們的uri屬性 是 object 類型的。
加載Android項目的圖片資源
那既然可以加載RN項目里的圖片,必然也可以加載android項目下的圖片,加載方式大同小異
唯一區別就是 在值里加一個imge!文件名,不需要后綴哦!