文章是寶寶自己寫的,你可以轉走喂链,標明哪來的就行王亟亟的大牛之路
國慶這些天要么旅游要么WOW返十,感覺整個人都廢了。椭微。
直接從黃種人曬成了非洲大酋長洞坑。。然而還是無橙赏表,這禮拜要做7天检诗,昨天把單元測試的東西整完后今天下午抽出時間繼續(xù)學習,然后就補一篇RN 主件的文章瓢剿,知識點源于官方文檔
原文地址:https://github.com/facebook/react-native/blob/master/docs/Images.md
效果圖
第一種為:加載RN項目下的圖片
第二種為:加載網絡圖片
第三種為:加載Android項目的圖片資源+圖片作為背景
加載RN項目下的圖片
如果你需要引用RN項目目錄下的圖片資源逢慌,就像使用html中的引用一樣,使用相對路徑去找
目錄如下
在我們的android.js同級有一個img文件夾间狂,里面有一個sample.jpg文件攻泼,而它就是我們所需要的
source={require('./img/sample.jpg')}/>
這樣就可以使用到我們的圖片了給source屬性利用require()給其傳第一個圖片地址,然后就可以渲染到上
當然有時候你的值是可變的鉴象,那也可以傳入一個對象去引用忙菠,如
但是以上寫法不是很好,我們盡量在渲染的時候給出正確的引用值纺弊,可以這樣:
一般來說我們的圖片資源本身大小不可控牛欢,所以我們會給控件預設一個尺寸,像這樣
加載網絡圖片
我們的APP不可能是一個純離線產品淆游,那網絡圖片就是必不可少傍睹,RN加載圖片就比遠程環(huán)境方便隔盛,給出正確的UR,就和網頁加載圖片一樣
還是和家在本地圖片一樣拾稳,官方希望大家給定控件的尺寸吮炕。
因為你的圖片尺寸不可控,當加載出來后把用戶第一次看到的布局給整變形了访得,這是一個很不好的用戶體驗龙亲。
Note:這里補充下 我們的uri屬性 是 object 類型的。
加載Android項目的圖片資源
那既然可以加載RN項目里的圖片悍抑,必然也可以加載android項目下的圖片鳄炉,加載方式大同小異
唯一區(qū)別就是 在值里加一個imge!文件名,不需要后綴哦传趾!