真是奇怪的反應，本地圖像問題

我有一個化身成分... 它返回這個...真是奇怪的反應，本地圖像問題

return (
    <View style={{flex:1, alignItems:'center',marginTop:-10}}> 
     <Image source={{uri: this.state.avatar}} /> 
     <Text style={styles.profileHeader}> 
      {this.state.username} 
     </Text> 
    </View> 
    )

然後我現在用的這個頭像通過將用戶名和頭像作爲道具。這工作得很好......

return (
     <View> 
      <AvatarHeader username={d.test_username} avatar={d.test_avatar} /> 
     </View>  
    );

現在到了奇怪的一部分。如果我這樣做...

return (
     <View> 
      <Image source={{uri: d.test_avatar}} /> 
      <AvatarHeader username={d.test_username} avatar={d.test_avatar} /> 
     </View>  
    );

圖像不顯示。 AvatarHeader仍然顯示，但圖像不會。即使在AvatarHeader中，它的字面上也是完全相同的圖像URL被傳遞。

（是的，我包括「形象」的要求主頁上）

來源

2016-03-07 KyleK

在你的意思是這個組件：'this.props.avatar'，而不是'this.state.avatar'，對吧？ – Cherniv

是的，你是對的。雖然這只是一個錯字。它的代碼中的道具......但我最終通過向圖像添加style = {{width：50，height：50}}來解決此問題。然後它工作。奇怪的是，我不需要在AvatarHeader Image標籤上設計樣式，並且需要它在圖片上。真的不明白爲什麼。可能與在AvatarHeader的視圖中使用flex：1有關。圖像被包裝在一個沒有造型的視圖中？ – KyleK

我也發現了一些奇怪的反應，用母語 - 意識到什麼是錯的。

當你導入圖像作爲文件，圖像會顯示沒有問題（沒有設置其大小）例如：

<Image source = {require('./img.jpeg')}/>

但是，如果你從一個URI設置圖像源，然後圖像會除非您在樣式表上設置圖片大小，否則不會顯示。

<Image source = {{uri: this.state.uri}}/>

原因是當圖像被導入時，尺寸隨之而來。但是當你使用uri時，尺寸是未定義的。

來源

2016-03-07 22:19:15

真是奇怪的反應，本地圖像問題

回答

相關問題