非常奇怪的反应原生图像问题

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 时，大小是未定义的。