react native 深坑之戰(zhàn) Android篇——image組件

先來(lái)點(diǎn)實(shí)際的:

image組件加載圖片的7種方式:

image組件加載圖片主要通過(guò)source屬性來(lái)設(shè)置痕届,現(xiàn)在我們來(lái)看一下source的幾種寫(xiě)法:


(1)官方文檔本地圖片常規(guī)方式1:source={require(“一個(gè)RN項(xiàng)目里的相對(duì)路徑”)}


(2)官方文檔網(wǎng)絡(luò)圖片常規(guī)方式2:source={require(“一個(gè)url網(wǎng)絡(luò)路徑”)}


(3)使用drawable文件夾下面的資源文件:source={uri:”文件名”}。這里的文件名是不帶后綴的舌劳,所以…你懂的。


(4)使用網(wǎng)絡(luò)圖片方式2:source={uri:”圖片的url網(wǎng)絡(luò)路徑"}


(5)官方使用網(wǎng)絡(luò)base64文件流 source={uri:’data:數(shù)據(jù)類(lèi)型玫荣;base64甚淡,base64數(shù)據(jù)’,scale: 值} //這個(gè)辦法沒(méi)有親測(cè)過(guò)捅厂,但是文檔的例子是這么寫(xiě)的贯卦。


(6)使用android fileURI路徑:source={uri:‘file///fileURI’}


(7)使用 android contentURI :source={uri:’content://……...’}


后面的有待補(bǔ)充.................................


image的gif動(dòng)態(tài)圖支持:


? ? image組件并不是直接支持動(dòng)態(tài)gif圖,需要在外面套上一個(gè)View方能正常播放焙贷,否則撵割,只顯示第一幀~!


神坑1:大部分1幀gif圖會(huì)報(bào)錯(cuò)辙芍;少部分2幀GIF圖會(huì)報(bào)錯(cuò)啡彬,原因不明羹与,報(bào)錯(cuò)內(nèi)容:../../....gif,¥#%……&error 庶灿?纵搁?(額,大概就是這樣的)


image 布局: ?

(1)image的flex:


其實(shí)對(duì)flex彈性盒子支持并不好往踢,貌似直接使用完全無(wú)效(這個(gè)毛病很多組件都有)腾誉,需要在父級(jí)加一層view,flex操作view菲语,image自己控制好自己在view里面的位置妄辩,SO惑灵,盡量設(shè)寬高山上,不然.......呵呵


(2)image用做背景圖:


盡量不要使用寬度為1的圖片拉伸來(lái)得到一個(gè)背景.......原因同上,你又要開(kāi)始計(jì)算寬高英支,又要?jiǎng)討B(tài)賦值佩憾,這次加上view都不行了(原因不明),父級(jí)加上view用flex完全沒(méi)用干花,

SO,總結(jié)下來(lái)就是妄帘,不管你用什么辦法,你都得確定image里面圖片的寬高池凄,不然.....再次呵呵

這里補(bǔ)充一下抡驼,image設(shè)寬高有兩種:style屬性或者source屬性:source={uri:uri,width:x肿仑,heigh:y}


剩下的致盟,暫時(shí)沒(méi)遇到或者忘了,大家有遇到的快快留言

今天7/18尤慰,自從上周五升級(jí)了0.29.1之后馏锡,所有的GIF圖都掛了,原因不明伟端,就是顯示空白杯道,也不報(bào)錯(cuò),檢查了2天责蝠,如果哪個(gè)朋友有填過(guò)這個(gè)坑党巾,請(qǐng)馬上聯(lián)系我,非常非常非常非常非常的感謝霜医!

下午三點(diǎn)半齿拂,Android的GIF支持解決,原因是0.29版剝離了fresco支持庫(kù)支子。導(dǎo)入即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末创肥,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌叹侄,老刑警劉巖巩搏,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異趾代,居然都是意外死亡贯底,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)撒强,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)禽捆,“玉大人,你說(shuō)我怎么就攤上這事飘哨∨呦耄” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵芽隆,是天一觀的道長(zhǎng)浊服。 經(jīng)常有香客問(wèn)我,道長(zhǎng)胚吁,這世上最難降的妖魔是什么牙躺? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮腕扶,結(jié)果婚禮上孽拷,老公的妹妹穿的比我還像新娘。我一直安慰自己半抱,他們只是感情好脓恕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著代虾,像睡著了一般进肯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棉磨,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天江掩,我揣著相機(jī)與錄音,去河邊找鬼乘瓤。 笑死环形,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的衙傀。 我是一名探鬼主播抬吟,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼统抬!你這毒婦竟也來(lái)了火本?” 一聲冷哼從身側(cè)響起危队,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎钙畔,沒(méi)想到半個(gè)月后茫陆,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡擎析,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年簿盅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揍魂。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡桨醋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出现斋,到底是詐尸還是另有隱情喜最,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布步责,位于F島的核電站返顺,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蔓肯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一振乏、第九天 我趴在偏房一處隱蔽的房頂上張望蔗包。 院中可真熱鬧,春花似錦慧邮、人聲如沸调限。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)耻矮。三九已至,卻和暖如春忆谓,著一層夾襖步出監(jiān)牢的瞬間裆装,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工倡缠, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留哨免,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓昙沦,卻偏偏與公主長(zhǎng)得像琢唾,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子盾饮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開(kāi)發(fā)基礎(chǔ)采桃,沒(méi)有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(mén)(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 20,663評(píng)論 15 16
  • 本文基于React Native 0.32 對(duì) 官方提供的Image組件進(jìn)行分析懒熙。 Image是一個(gè)用于顯示多種圖...
    卑鄙的鹿尤菌閱讀 3,379評(píng)論 0 4
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件普办、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,094評(píng)論 4 62
  • 這本書(shū)就像另一個(gè)反面的自己煌珊,借由他發(fā)泄心中對(duì)整個(gè)社會(huì)的控訴,有一種暗自暢快的感受泌豆,但是不代表我們不陽(yáng)光定庵,霍爾頓真正...
    菡丹飛揚(yáng)閱讀 210評(píng)論 2 1