2017-06-20 191 views
2

反應原生:如何在Android上設置Image defaultSource。反應原生:如何在Android上設置Image defaultSource

我已閱讀React native 1.58文件。我發現圖片道具defaultSource僅支持iOS。

當網絡圖像加載錯誤時,我需要設置默認圖像。

我以前寫這樣的代碼:

{ ImageUrl? 
       <Image style={styles.docimg} 
         source={{uri: ImageUrl}}/> 
        : 
       <Image style={styles.docimg} 
         source={require('../../../resource/default.png')}/> 
       } 

現在有一個問題。當URL是字符串類型時,但它不是正確的網絡圖像。由於網址爲true,圖片將不顯示任何內容。

我看到圖片道具onError也許解決了我的問題。

我需要設置佔位符圖像。

+0

什麼意思是'不正確的網絡圖像',當網絡圖像無效時出現什麼字符串。舉例說明無效的url字符串。 –

+0

@RaviRaj網絡圖片URL是錯誤的路徑。當網絡圖片網址錯誤時,我需要做一些事情,例如,顯示佔位符圖片。 – jiexishede

+0

@RaviRaj答案是有用的,但你只應該操縱狀態onError。 onError = {()=> this.setState({showDefault:true})} – Hmm

回答

2

你只要試試這個,希望它的工作原理...

// initially showDefault will be false 
var icon = this.state.showDefault ? require('../../../resource/default.png') : {uri: ImageUrl}; 

return(
    <Image 
    style={styles.docimg} 
    source={icon} 
    onLoadStart={() => this.setState({showDefault: true})} 
    onLoad={() => this.setState({showDefault: false})} 
    /> 
) 

設置showDefault =虛假的onLoad()應該不會觸發URL 因爲圖像是由默認的Android和iOS緩存再次讀取。

+0

當'onLoad觸發showDefault:false'時,我的圖像在默認圖像和真實圖像之間保持閃爍。任何想法? – vzhen