非常奇怪的反應原生圖像問題

Question

我有一個頭像組件......它返回這個......

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 完全相同。

（是的，我在主頁上包含“圖像”作為要求）

Answer 1

我也使用 react-native 發現了一些奇怪的東西——意識到出了什么問題。

當您將圖像作為文件導入時，圖像將顯示沒有問題（無需設置其大小），例如：

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

但是，如果您從 uri 設置圖像源，則除非您在樣式表上設置圖像大小，否則圖像將不會顯示。

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

原因是在導入圖片的時候，尺寸就自帶了。 但是當你使用 uri 時，大小是未定義的。