javascript - 非常奇怪的 react native 图像问题

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>
    )

然后我通过传递用户名和头像作为 Prop 来使用这个头像。这工作正常...

   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 仍然显示，但 Image 不会显示。即使在 AvatarHeader 中，它实际上传递的图像 URL 完全相同。

(是的，我将“图像”作为主页上的要求)

Answer 1

我也使用react-native发现了一些奇怪的事情 - 意识到出了什么问题。

当您将图像导入为文件时，图像将不会显示任何问题(无需设置其大小)例如:

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

但是，如果您从 uri 设置图像源，则除非您在样式表上设置图像大小，否则图像将不会显示。

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

原因是图片导入的时候，尺寸也随之而来。但是当你使用uri时，大小是未定义的。